JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="TwoColumn">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="column2">6</li>
    <li class="column2">7</li>
    <li class="column2">8</li>
    <li class="column2">9</li>
    <li class="column2">10</li>
</ul>

CSS

.TwoColumn {
    width: 20px;
    padding-left: 22px;
}

.TwoColumn li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 -22px 0 -22px;
    float: left;
    clear: left;
    border: 1px solid blue;
}

.TwoColumn .column2 {
    float: none;
    clear: none;
    margin: 0 -11px 0 0;
}