Table height does not stretch in Flexbox

Question

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

table {
  width: 48%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid gray;
  padding: 5px;
}

<div class="flex">
  <table>
    <tbody>
    <tr>
      <th>1st Table</th>
    </tr>
    <tr>
      <td>
      <p>
        I want to be <br>
        the same height<br>
        as the next table
      </p>
      </td>
    </tr>
    </tbody>
  </table>

  <table>
    <tbody>
    <tr>
      <th>2nd Table</th>
    </tr>
    <tr>
      <td>
      <p>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines
      </p>
      </td>
    </tr>
    </tbody>
  </table>
</div>

I'd like to match the highest table among the tables with unknown heights, but how can I do it?

In the case of div, there is no problem with "align-items: stretch;"

I tried "align-items: stretch;", but the height did not change. If possible, I'd like to extend the height of "th" by "td" without changing its height, but do I have to use JavaScript?

Answer 1

Since Flexbox being one of the newest edition to CSS and Table being one of the oldest, they won't play along well together, and not mainly because of the age difference, but the Table element specs. (and inconsistent behavior cross browser) give plenty of room for interpretations.

In this case, add a wrapper and give the table a height.

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

.flex > div {
  width: 48%;                          /* added  */
}

table {
  height: 100%;                        /*  added  */
  width: 100%;
  border-collapse: collapse;
}

td {
  height: 100%;                        /*  added  */
}

th, td {
  border: 1px solid gray;
  padding: 5px;
}

<div class="flex">
  <div>
    <table>
      <tbody>
        <tr>
          <th>1st Table</th>
        </tr>
        <tr>
          <td>
            <p>
              I want to be <br> the same height<br> as the next table
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <table>
      <tbody>
        <tr>
          <th>2nd Table</th>
        </tr>
        <tr>
          <td>
            <p>
              This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>