Create uniform height for side-by-side tables in HTML CSS

Question

I have two or more different tables that are generated by a php loop; I want them all to have the same

item height for each table with different text:

<div class="table-1">
  <ul>
    <li>short text1</li>
    <li>short text1</li>
    <li>long text1 long text1 long text1 long text1 long text1 long text1 </li>
    <li>short text1</li>
  </ul>
</div>
<div class="table-2">
  <ul>
    <li>short text2</li>
    <li>long text2 long text2 long text2 long text2 long text2 long text2 </li>
    <li>short text2</li>
    <li>short text2</li>
    <li>short text2</li>
  </ul>
</div>

Answer 1

Not sure if this is what you want but you can easily set the height of all li items by adding li {height: 40px} in CSS

Or see the example https://codepen .io/oldskool123/pen/poQqxVK