JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

<div id="outer">
    <ul id="list">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
        <li>Item #11</li>
        <li>Item #12</li>
    </ul>
</div>

CSS

ul#list {
    font-family: sans-serif;
    list-style: none;
    background: #dddddd;
    max-height: 200px;

    /* Works only in Firefox! */
    -moz-columns: 100px auto;
    -moz-column-gap: 10px;
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
    -moz-column-fill: auto;
}

li {
    height: 20px;
    padding: 2px;
}