title: CSS match height of other elements in row
body: <p>I'm using Bootstrap, and I'm trying to make a row of boxes be the same height.</p>
  
  <p>Here is a dumbed-down example:</p>
  
  <p>CSS:</p>
  
  <pre><code>.col-md-4 {
      border:1px solid black; 
      height:100%;
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;Less text&lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit&lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This results in the first box in the row being small, and the third box being very large. I want them all to have the same height.</p>
  
  <p>How do I make the height of all the boxes in the row match the tallest box without setting a static height? I don't know how big the largets box will be. I know I could do this with a table, but that would not be optimal. Is there a way to do this with CSS? </p>
  
  <p>Here is a <a href="http://www.bootply.com/hOENpl5Gi8" rel="nofollow">bootply example</a>. I did some googling but couldn't find what I was looking for.</p>