How to add additional same height rows in td of table

I have datatable, I want to add more rows in td after Name column, It can be one, two or more. The problem is that the rows are not aligned to each other.

How can I make structure like that so that these data be aligned to each other. I can use rowspan but the number of rows not static, it can be added or deleted

I have designed this as sample you can have your own idea, I have only this solution in mind but it is not working

table, td, tr {
  border: 1px solid black;
}

table {
border-collapse: collapse;
}

<table class="table table-bordered table-striped table-hover datatable datatable-Room" style="width: 100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Plan Name</th>
      <th>Plan Period</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="#">John</a>
      </td>
      
      <td>
        <div>Some Plan</div>
        
        <hr>
        
        <div>Some Plan</div>
      </td>
      <td class="p-0">

        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
        
        <hr>
        
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>

      </td>
      <td class="p-0">
        <div>$30</div>
        
        <hr>
        
        <div>$45</div>
      </td>

    </tr>
    
    <tr>
      <td>
        <a href="#">John</a>
      </td>
      
      <td>
        <div></div>
        
        <hr>
        
        <div>Some Plan</div>
      </td>
      <td class="p-0">

        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
        
        <hr>
        
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>

      </td>
      <td class="p-0">
        <div>$30</div>
        
        <hr>
        
        <div>$45</div>
      </td>

    </tr>
  </tbody>
</table>

Solution

Is this what you wanted?

table, td, tr {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

<table class="table table-bordered table-striped table-hover datatable datatable-Room" style="width: 100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Plan Name</th>
      <th>Plan Period</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2"><a href="#">John</a></td>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
      </td>
      <td class="p-0">
        <div>$30</div>
      </td>
    </tr>
     
    <tr>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>
      </td>
      <td class="p-0">
        <div>$45</div>
      </td>
    </tr>
     
    <tr>
      <td rowspan="2"><a href="#">John</a></td>
      <td></td>
      <td class="p-0">
        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
      </td>
      <td class="p-0">
        <div>$30</div>
      </td>
    </tr>
     
    <tr>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>
      </td>
      <td class="p-0">
        <div>$45</div>
      </td>
    </tr>
  </tbody>
</table>