title: Css distribute number of elements evenly in 2 columns
body: <p>I've content in the li's below that can be expended via an accordion on click:</p>
  <pre><code>&lt;ul&gt;
  &lt;li&gt;Accordion item 1&lt;/li&gt;
  &lt;li&gt;Accordion item 2&lt;/li&gt;
  &lt;li&gt;Accordion item 3&lt;/li&gt;
  &lt;li&gt;Accordion item 4&lt;/li&gt;
  &lt;li&gt;Accordion item 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>With this css</p>
  <pre><code>ul {
  columns: 2;
  }
  li {
  break-inside: avoid;
  }
  </code></pre>
  <p>If all items are collapsed, the columns: 2 works just fine.</p>
  <p>However, as soon as an item is expended to take more height, the items get distributed unevenly.</p>
  <p>What I'd like is for the number of elements (li's in this case) to be the same on either side at all times when collapsed or expanded.</p>
  <p>I'll try to illustrate:</p>
  <pre><code>Collapsed:
  Accordion item 1 | Accordion item 4
  Accordion item 2 | Accordion item 5
  Accordion item 3 |
  
  Item 1 expanded:
  Accordion item 1 Expanded | Accordion item 3
  Accordion item 1 Expanded | Accordion item 4
  Accordion item 1 Expanded | Accordion item 5
  Accordion item 2          |
  
  I cannot have the elements re-ordered, it should be:
  Accordion item 1 Expanded | Accordion item 4
  Accordion item 1 Expanded | Accordion item 5
  Accordion item 1 Expanded |
  Accordion item 2          |
  Accordion item 3          | 
  </code></pre>
  <p>Is there a trick to achieve this?</p>