how to arrange "prices" in a single responsive column, number of dots depend on the length of text

i have tried this code but this dont give a solution. without using bootstrap table. how could i manage the number of dots for each service. How price comes in a proper column and number of dots can be managed automatically.

<table class="table table-hover">
<thead >
  <tr>
    <th>Title</th>
    <th>Rates</th>
  </tr>
</thead>
<tbody>
  <tr>
     <td >Federal Incorporation (for profit corporation)......... </td>
     <td class="">$675.00</td>
  </tr>
  <tr>
     <td>Nonprofit Incorporation</td>
     <td>...........................................</td>
     <td>$975.00</td>
  </tr>
  <tr>
     <td>Registering Business Name  Master Business License </td>
     <td>$225.00</td>
  </tr>
  <tr>
     <td>Shareholder’s Agreement</td>
     <td>$1450.00</td>
  </tr>
  <tr>
     <td>Registering Business Name Master Business License </td>
     <td>$225.00</td>
  </tr>
  <tr>
     <td>Registering Business Name btaining Master Business License</td>
     <td>$225.00</td>
  </tr>
</tbody>
</table>