title: Remove unnecessary space in CSS3 columns
body: <p>I'm experimenting with the latest columns feature in CSS3. Each <code>ul</code> has varying heights, and I want them to have equal margins <strong>above</strong> and <strong>below</strong>. At the moment, because one <code>ul</code> is much longer than the rest, it is pushing the second row down. Is it possible for the longest <code>ul</code> to not force so much space beneath it?</p>
  
  <p><a href="http://jsfiddle.net/t5ng3/" rel="nofollow">http://jsfiddle.net/t5ng3/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      background-color: grey;
      max-width: 600px;
      -webkit-column-width: 50%;
  }
  
  ul {
      background-color: orange;
      display: inline-block;
      vertical-align: top;
      width: 20%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
          &lt;li&gt;Item&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>