JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>1</li> <li>2</li> <li>3</li>
        <li>4</li> <li>5</li> <li>6</li>
        <li>7</li> <li>8</li> <li>9</li>
        <li>11</li> <li>12</li> <li>13</li>
        <li>14</li> <li>15</li> <li>16</li>
        <li>17</li> <li>18</li> <li>19</li>
        <li>21</li> <li>22</li> <li>23</li>
        <li>24</li> <li>25</li> <li>26</li>
        <li>27</li> <li>28</li> <li>29</li>
    </ul>
</div>

CSS

div
{
    overflow-x: hidden;
    overflow-y: auto;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; 
    max-height: 100px;
}