title: display divs inline-block in 2 columns without vertical gaps
body: <p>Quite a simple problem, but I can't seem to find a solution (using pure css, I'd like to avoid things like Isotope). I have a 2 column grid, the divs displayed inline-block so they fill the <code>.wrap</code> div, problem is though because the divs have variable heights, there are massive gaps below the divs in the right hand column.</p>
  
  <p>jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/ntyLg/" rel="nofollow">http://jsfiddle.net/neal_fletcher/ntyLg/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="test"&gt;&lt;/div&gt;
      &lt;div class="test"&gt;&lt;/div&gt;
      &lt;div class="test"&gt;&lt;/div&gt;
      &lt;div class="test"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.wrap {
      position: absolute;
      width: 500px;
      height: auto;
  }
  
  .test {
      width: 240px;
      background-color: orange;
      display: inline-block;
      vertical-align: text-top;
      margin-bottom: 5px;
  }
  
  .test:nth-child(odd) {
      height: 200px;
  }
  .test:nth-child(even) {
      height: 100px;
  }
  </code></pre>
  
  <p>Any CSS only solutions to such a problem? Any suggestions would be greatly appreciated!</p>