title: Make two floating tables the same height
body: <p>I have two floating tables with differing numbers of rows (see 
  <a href="https://jsfiddle.net/cu02qqx7/" rel="nofollow noreferrer">JSFiddle</a>).</p>
  
  <p>I want the two tables to have the <strong>same height</strong> without setting the height explicitly to, e.g., 400px. I tried putting them in a div container with height:100% as suggested in the answer to <a href="https://stackoverflow.com/questions/13877302/table-height-100-inside-div-element">this</a> question but this only led to the tables not being aligned horizontally anymore.</p>
  
  <p>Is there a way to achieve this using only HTML and CSS?</p>
  
  <p>This is the HTML code for the tables:</p>
  
  <pre><code>&lt;table class="left"&gt;
      &lt;tr&gt;
          &lt;th&gt;Row1&lt;/th&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/td&gt;        
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;th&gt;Row2&lt;/th&gt;
          &lt;td&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/td&gt;        
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;th&gt;Row3&lt;/th&gt;
          &lt;td&gt;Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. &lt;/td&gt;
          &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Row4&lt;/th&gt;
          &lt;td&gt;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/td&gt;      
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table class="right"&gt;
      &lt;tr&gt;
          &lt;th&gt;1&lt;/th&gt;
          &lt;td&gt;Monday&lt;/td&gt;     
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;2&lt;/th&gt;
          &lt;td&gt;Tuesday&lt;/td&gt;        
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;3&lt;/th&gt;
          &lt;td&gt;Wednesday&lt;/td&gt;      
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;4&lt;/th&gt;
          &lt;td&gt;Thursday&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;th&gt;5&lt;/th&gt;
      &lt;td&gt;Friday&lt;/td&gt;     
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;6&lt;/th&gt;
          &lt;td&gt;Saturday&lt;/td&gt;       
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;7&lt;/th&gt;
          &lt;td&gt;Sunday&lt;/td&gt;     
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>With the following CSS:</p>
  
  <pre><code>table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  table td, th {
      border: 1px solid darkgrey;
      text-align: left;
      padding: 0.4em;
  }
  
  table.left {
      width: 70%;
      height: 400px;
      float: left;
  }
  
  table.right {
      width: 25%;
      height: 400px;
      float: right;
  }
  </code></pre>