JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

CSS

ul {
    display: flex;
    flex-flow: column wrap;
    height: 100px;
}
ul li {
    width: 150px;
    list-style-type: none;
    border: 1px solid black;
    text-align: center;
}