title: CSS: border-bottom on last li in multiple columns ul appears at wrong position
body: <p>I have <code>&lt;ul&gt;</code> with 2 columns.</p>
  
  <p><code>border-bottom</code> of the last item in first column appears at the top of the second column.</p>
  
  <p>See fiddle: <a href="https://jsfiddle.net/6b7bkomo/" rel="noreferrer">https://jsfiddle.net/6b7bkomo/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    column-count: 2;
  }
  
  li {
    list-style-type: none;
    border-bottom: 1px solid red;
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;a&lt;/li&gt;
    &lt;li&gt;b&lt;/li&gt;
    &lt;li&gt;c&lt;/li&gt;
    &lt;li&gt;d&lt;/li&gt;
    &lt;li&gt;e&lt;/li&gt;
    &lt;li&gt;f&lt;/li&gt;
    &lt;li&gt;g&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Only happens with odd number of list items.
  Happens in Chrome and Edge, does not happens in FireFox.</p>
  
  <p>Why does it happen?</p>
  
  <p>How can I fix it?</p>
  
  <p>Thanks!</p>