JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Float Method</h3>
<ul class="two-col-float">
    <li>Apple</li>
    <li>Mango</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

<h3>CSS3 Method</h3>
<ul class="two-col-css3">
    <li>Apple</li>
    <li>Mango</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

<p>Notice the difference in the ordering of the element</p>

CSS

body {
    font-family: Arial, Helvatica, sans-serif;
}   

h3 {
    font-weight: bold;
    font-size: 16px;
    margin: 15px 0 5px;
}

ul {
    width: 200px;
}

p {
    margin-top: 15px;
}

.two-col-float {
  overflow: hidden;
}

.two-col-float li {
  width: 90px; /* Change this to any amount you want */
  margin-right: 10px;
  float: left;
}

.two-col-css3 {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}