Align tables inside table

Question

I have a table containing another table in order to get multiple rows inside a td element. I would like to align the cells Some, thing A with Something A and
Some, thing B with Something B so that they have the same height.

td { border: 1px solid black; }

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing A
          </td>
        </tr>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing B
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>
            Something A<br />bigger
          </td>
        </tr>
        <tr>
          <td>
            Something B<br />bigger
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Desired result should look like this

Answer 1

Flexbox should help.

My answer is inpired by this SO answer

td { border: 1px solid black; }

#outer-row {
  display: flex;
}

.outer-cell {
  flex: 1;
}

<table id="outer-table">
  <tr id="outer-row">
    <td class="outer-cell">
      <table class="inner-table">
        <tr>
          <td>
            Some
          </td>
          <td>
            thing A
          </td>
        </tr>
        <tr>
          <td>
            Some
          </td>
          <td>
            thing B
          </td>
        </tr>
      </table>
    </td>
    <td class="outer-cell">
      <table class="inner-table">
        <tr>
          <td>
            Something A<br />bigger
          </td>
        </tr>
        <tr>
          <td>
            Something B<br />bigger
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>