title: Make multiple divs of equal height when they aren't always on the same line
body: <p>I've tried a bit and am having trouble with this.</p>
  <p>I have 6 <code>div</code>s with headings and lists. Ideally, I'd like to have these line up as required, with a maximum of 3 one any one line, so the potential layouts are either 3x2, 2x3 or 6x1.</p>
  <p>The problem I've having at the moment is that I can't get the divs to match their heights correctly.</p>
  <p>Issues I've had:</p>
  <ul>
  <li>I can't use <code>display:table-cell</code> as this means I have fixed rows.</li>
  <li>I tried using fixed heights, but that causes odd offsets as in the second image.</li>
  </ul>
  <p>I've got a <a href="http://jsfiddle.net/VNcaH/" rel="nofollow noreferrer">jsfiddle setup with the code</a> but its below as well.</p>
  <h2>How can I (preferably with CSS only) get these <code>div</code>s to have identical heights and widths, while lining up vertically correctly?</h2>
  <p>CSS (generated from LESS, sans <code>ul</code> and <code>h2</code> styling):</p>
  <pre><code>div div {
          display:inline-block; 
          border:1px solid gray;
          padding:5px;
          margin:10px;
          width:20%;
          height:100%;
          border-radius: 8px;
  }
  h2 {
      margin:0px;padding:0px;
      font-size:12pt;
      text-align:center;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;homeFaq&quot;&gt;
  
      &lt;div&gt;
          &lt;h2&gt;What is metadata?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h2&gt;What is [BRAND]?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;How can I get data?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;How can I add content?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;Lorum Lorum?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;Lorum Lorum?&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;Ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum&lt;/li&gt;
              &lt;li&gt;Ipsum&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/13C2y.png" alt="2 rows of 3 with unequal heights" /></p>
  <p><img src="https://i.stack.imgur.com/LwxrI.png" alt="2 rows of 3 with unequal heights" /></p>
  <p><img src="https://i.stack.imgur.com/cV7D3.png" alt="2 rows of 4 and 2 still unequal heights" /></p>
  <p><img src="https://i.stack.imgur.com/PveeW.png" alt="3 rows of 2 with more unequal heights" /></p>
  <p><a href="http://jsfiddle.net/VNcaH/" rel="nofollow noreferrer">http://jsfiddle.net/VNcaH/</a></p>