JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<ul>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
<li>List-item
<ul>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
<li>Sub-list-item</li>
</ul>
</li>
</ul>
</div>
CSS
ul {
list-style: none;
margin:0;
padding:0;
}
ul > li {
display: inline-block;
width: 100%;
}
ul > li > ul >li {
color: red;
}
div {
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
}