title: CSS columns vertical alignment in Chrome
body: <p>With the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;body&gt;
      &lt;div style="-webkit-column-width:5em;-moz-column-width:5em;"&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;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In Chrome I get a weird alignment of rows:</p>
  
  <p><img src="https://i.stack.imgur.com/9AZ5p.png" alt="Chrome Alignment Issue"></p>
  
  <p>The rows align correctly in Firefox. Does anyone know how to fix this?</p>