JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>lorem</li>
    <li>ipsum</li>
    <li>Really long text with lots of spaces and other stuff in it, for your viewing pleasure</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetuer</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>frank</li>
    <li>Geraldine</li>
    <li>Montessori</li>
    <li>Really long text with lots of spaces and other stuff in it, for your viewing pleasure</li>
</ul>

CSS

ul li {
    /* set li height */
    line-height: 20px;
}
ul li:nth-of-type(3n+4) {
    /* move every 3rd li up, starting with 4th */
    margin-top: -60px;
    /* 3 times li's height */
}
ul li:nth-of-type(n+4) {
    /* spacing for the second column */
    margin-left: 120px;
}
ul li:nth-of-type(n+7) {
    /* and the third one */
    margin-left: 240px;
}