Two child tables side-by-side in one cell with same height

I have two tables next to each other contained in a parent table's cell. Is there any way (or trick one could use) to make both child tables fit the height of the parent cell with HTML and CSS?

So if a cell has more content than the other, they both would have the same height.

<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:thin solid black; width:600px;" align="center">
  <tr>
    <td>
      <!--left table-->
      <table cellpadding="0" border="0" cellspacing="0" style="width:86px; height:100%; background-color:#808080; margin-left:0px;" align="left">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" style="background-color:#808080; color:white;" align="center">
            Fit the height of the right side?
          </td>
        </tr>
      </table>
      <!--right table-->
      <table cellpadding="4" border="0" cellspacing="0" style="width:500px; height:100%;">
        <tr>
          <td align="left" height="42" valign="middle" cellspacing="0" border="0" style="background-color:#000000; padding-left:10px; color:white;">
            Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>