JSFiddle - React, Tailwind, and code Playground

by gatsbimantico

HTML

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

CSS

.x{
	columns: 10em;
	-webkit-columns: 10em; /* Safari and Chrome */
	-moz-columns: 10em; /* Firefox */
}
.x li{
    float:left;
	break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}