Two tables with different columns - Possible to be same height? HTML CSS
<p>I have two tables like so. These are floated:left to appear next to each other. I would like to have table 2 the same height as table 1. As in, the yellow background goes down to the bottom of table 1.
Currently:</p>

<p><a href="https://i.stack.imgur.com/iiycK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iiycK.png" alt="Table"></a></p>

<p>Should look like:</p>

<p><a href="https://i.stack.imgur.com/sVupi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sVupi.png" alt="enter image description here"></a></p>

<p>I don't want to have to hard code pixels as it needs to display the same across different monitors and mobile devices. </p>

<p>Edit: I'll just give the last row a longer height. Thanks for your answers.</p>