title: Vertical-top align ul items side by side
body: <p>I set my UL items to have <code>display: inline-block</code>, 30% width, and they align side by side corretly.</p>
  
  <p>But, they vertical align to bottom if there is a bigger li.</p>
  
  <p>Is there any way to top align this items?</p>
  
  <p>One solution that I don't like is to have a Javascript that equals height from all elements, but don't seens to be a clean solution to this problem, since different rows may need different heights. </p>
  
  <p>Code snippet here..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    display: block;
    width: 100%;
    list-style: none;
    padding: 0;
  }
  ul &gt; li {
    display: inline-block;
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;h1&gt;Item A with Long text&lt;/h1&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quisquam debitis officia impedit sed omnis dolorem nihil doloribus dolore provident totam unde minus possimus quae dignissimos quo necessitatibus ipsa molestias.
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h1&gt;Item B with Short Text&lt;/h1&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h1&gt;Item C with Short Text&lt;/h1&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h1&gt;Item D with Short Text&lt;/h1&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>