JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="service-list">
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
                <li>Cras mattis consectetur purus sit amet fermentum.</li>
              </ul>

CSS

ul li {list-style-type:disc !important; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;}
ul    {list-style-type:disc !important;  margin-top: 1em; -webkit-column-count: 2; -webkit-column-gap:0.5em; -moz-column-count:2; -moz-column-gap:0.5em; -o-column-count:2; -o-column-gap:0.5em; column-count:2; column-gap:0.5em;}