Css 如何将表格单元格的最后一个子级与单元格底部对齐

我有一个单元格内有两个div的表.我希望第一个div与单元格的顶部对齐，最后一个div与底部对齐.下面是表格可能的样子的一个示例:

<table>
  <tr>
    <td class="left-cell">
      <div class="cell-container">
        <div class="first-div">
          This content should be at top of the cell, but not overlap
        </div>
        <div class="last-div">
          This content should be at bottom of the cell, but not overlap
        </div>
      </div>
    </td>
    <td>
      Long Content
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </td>
  </tr>
  
  <tr>
    <td class="left-cell">
      <div class="cell-container">
        <div class="first-div">
          This content should be at top of the cell, but not overlap
        </div>
        <div class="last-div">
          This content should be at bottom of the cell, but not overlap
        </div>
      </div>
    </td>
    <td>
      Shorter Content
    </td>
  </tr>
</table>

我的第一个try 是在表格单元格上使用相对定位，在底部div上使用绝对定位.当表格单元格的高度足以容纳所有内容时，这是可行的，但绝对定位会导致较小单元格的两个div重叠.

CodePen:https://codepen.io/Adam-Petersen/pen/mdgJwaG

接下来，我try 使用Flexbox，但在表格单元格中使用Flexbox时，似乎存在一些不寻常的呈现逻辑.这是我到目前为止想出的最好的try :

CodePen:https://codepen.io/Adam-Petersen/pen/NWmqgeZ

这在Chrome上运行得很好，但在Firefox上就不行了.我不明白为什么td上需要height: 0px才能证明我在Chrome上想要的内容是正确的，但如果不能在Firefox上工作，我将不得不想出其他的东西.

有没有什么方法可以让这个CSS与Firefox兼容，或者有没有另一种我完全没有考虑过的方法？