JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<ul class="service-list">
    <li class="service">Service</li>
    <li class="service">Service</li>
    <li class="service">Service</li>
        <li class="service">Service</li>
    <li class="service">Service</li>    <li class="service">Service</li>
    <li class="service">Service</li>
        <li class="service">Service</li>
    <li class="service">Service</li>
</ul>

CSS

.service-list {
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    list-style:none;
}
    .service {
            -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
        position: relative;
        padding: 0.5rem 0 0.5rem 1rem;
        font-weight: 200;
    }
    .service:before {
         content:'';
            position: absolute;
            top: 0;
            left: 0;
        width:15px;height:15px;background-color:#ccc;
            font-size: 0.5rem;
    }