JSFiddle - React, Tailwind, and code Playground

by mblase75

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 {
    margin-left: 1em;
    -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: outside disc;
    padding: 0.5em;
    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;
}