How do I place two rows in a td cell: top and bottom of the cell?

Question

there is a simple table with one row and two cells, the height of the table and the cell should not be specified explicitly and depends on the content. The contents are in the right cell, in the left you need to write a line from the top of the cell and a line from the bottom of the cell. Can you tell me how to do this?

td {
    border: 1px solid gray;
}

.cell {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid red;
    justify-content: space-between;
}

.top {
    align-self: flex-start;
}

.bottom {
    align-self: flex-end;
}

<table>
    <tr>
        <td>
            <div class="cell">
                <div class="top">String top</div>
                <div class="bottom">String bottom</div>
            </div>
        </td>
        <td>
            START<br><br><br><br><br><br><br><br><br>END
        </td>
    </tr>
</table>

Example image

If you explicitly specify the height of the cell, there is no problem, but if you do not specify the height, the nested div does not occupy a height equal to the actual height of the cell.

Answer 1

I got it working by giving the table, td and tr a height of 100%. I could even put flex on the td directly.

td,
tr,
table {
  border: 1px solid gray;
  height: 100%;
}

div {
  border: 1px solid red;
}

.cell {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
  justify-content: space-between;
}

.top {
  align-self: flex-start;
}

.bottom {
  align-self: flex-end;
}

<table>
  <tr>
    <td class="cell">
      <div class="top">String top</div>
      <div class="bottom">String bottom</div>
    </td>
    <td>
      START<br><br><br><br><br><br><br><br><br>END
    </td>
  </tr>
</table>