JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cols">
    <dl>
        <dt>Location</dt>
        <dd><a href="#">City</a></dd>
        <dd><a href="#">County</a></dd>
        <dd><a href="#">State</a></dd>
        <dd><a href="#">Nation</a></dd>

        <dt>Projects</dt>
        <dd><a href="#">Groups</a></dd>
        <dd><a href="#">Group notices</a></dd>
        <dd><a href="#">Purpose</a></dd>

        <dt>Properties</dt>
        <dd><a href="#">Status</a></dd>
        <dd><a href="#">Tenancy</a></dd>
        <dd><a href="#">Types</a></dd>
        <dd><a href="#">Certification</a></dd>
        <dd><a href="#">Test 1</a></dd>
        <dd><a href="#">Test 2</a></dd>

        <dt>General</dt>
        <dd><a href="#">Measurement units</a></dd>
        <dd><a href="#">Notification methods</a></dd>
        <dd><a href="#">Statuses</a></dd>
        <dd><a href="#">Report type</a></dd>
        <dd><a href="#">Report formats</a></dd>
    </dl>
</div>
<div class="cols">
    <p>Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
</div>

CSS

a { text-decoration:none}
dl { margin:0;display:inline-block;}
dt { font-weight:bold; font-size:larger}
dd { margin-left:.5em}
.cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap : 20px;
    -moz-column-rule-color:  #ccc;
    -moz-column-rule-style:  solid;
    -moz-column-rule-width:  1px;
    -webkit-column-rule-color:  #ccc;
    -webkit-column-rule-style: solid ;
    -webkit-column-rule-width:  1px;
}