How to move list-items to a new column if they extend past the height of the container?

Question

I have a list where I'd like to build two columns from. The list can have a variable amount of items in it, but a max. of 8

I always want the first column to have 4 elements. I already tried column-count: 2 but this does not work fine on an uneven number, because the first row must 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>