How can I achieve a column type HTML layout of items with just CSS (2 columns, equal height)

So basically I have any number of items, usually between 5-10 items. I want to order these in 2 columns of equal height, or as close to equal as possible (odd number of items). For example:

1 5
2 6
3 7
4

What I definitely don't want is something where it depends on the height like this:

1 6
2 7
3
4
5

I know I can count the length of the array and divide by two to get the max index for the first column like below, but I want to achieve this in just CSS:

Math.ceil(( ITEMS.length / 2)) - 1; // Input of 9 outputs 4 as the max index

I have tried using Flex and Grid but can't seem to get something to work correctly but I'm more than likely just missing something.

Solution

Thanks to Pete's vague comment (in a good way) I have figured it out.

Example below:

<div class="content-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.content-box {
  columns: 2 auto;
}

Literally a CSS one liner haha

https://codepen.io/anon/pen/aGByjL