How would I go about creating an unordered list that displays 2 list items per line?

I wanted to ask how I would go about achieving the results mentioned in the title?

<ul class="item">
    <li class="headings">Heading 1:</li><li>Value 1 </li>
    <li class="headings">Heading 1:</li><li>Value 2</li>
    <li class="headings">Heading 3:</li>
    <li class="headings">Heading 4</li><li>Value 4</li>
    <li class="headings">Heading 5</li><li>Value 5</li></ul>
</ul>

I know the correct way to accomplish this would be to have a new unordered list for every 2nd list item, but for some reason the car-row outputs all the list items within a single unordered list.

>Solution :

You can use display grid. Something like this:

.item{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

<ul class="item">
    <li class="headings">Heading 1:</li>
    <li>Value 1</li>
    <li class="headings">Heading 1:</li>
    <li>Value 2</li>
    <li class="headings">Heading 3:</li>
    <li>Value 3</li>
    <li class="headings">Heading 4</li>
    <li>Value 4</li>
    <li class="headings">Heading 5</li>
    <li>Value 5</li></ul>
</ul>

Or

You can change ul default behaviour, Something like this:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}