I have a list that I would like to organize into two columns. The number of items in the list may vary, but it will not exceed 8.
My goal is to always have the first column display 4 elements. I attempted to use column-count: 2 but this did not work properly with an odd number of items because the first row needs to contain 4 elements.
.container {
border: 1px solid red;
width: 300px;
height: 90px;
}<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>