title: CSS making two divs equal height with display table
body: <p>In the following HTML, the div .left and .right have different heights. Is it possible to make both <code>divs</code> same height without defining the height. I have tried using <code>display:table</code> but does not work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .wrap{
          overflow:hidden;
          width:250px;
          display: table;
          border-collapse: collapse;
      }
      
      
      .left{
          width:100px;
          float:left;
          display: table-cell;
          border-bottom:1px solid green;    
      }
      
      
      .right{
          width:150px;
          float:left;
          border-bottom:1px solid red;
          display: table-cell;     
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="wrap"&gt;
      
          &lt;div class="left"&gt;
             Lorem    
          &lt;/div&gt;
      
          &lt;div class="right"&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          &lt;/div&gt;
      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>jsfiddle:</strong>
  <a href="http://jsfiddle.net/fJbTX/1/" rel="nofollow noreferrer">http://jsfiddle.net/fJbTX/1/</a></p>