How to split a list in two columns after specific element?

Issue

I have a list with 6 items, and I want to arrange it into a two-column layout. And the split needs to happen after element number 3. So, 3 li elements in the left column, and 3 elements in the right column. How do I achieve this? I can't edit the HTML at all.

This is the HTML layout:

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Solution

You can use column-count to decide how many columns you want your ul to have.

.columns {
  width: 150px;
  column-count: 2;
}

<div class="columns">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</div>

Answered By - manjiro sano