JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<div>
  <ul>
    <li id="unique1">text</li>
    <li id="unique2">text</li>
    <li id="unique3">text</li>
    <li id="unique4">text</li>
    <li id="unique5">text</li>
    <li id="unique6">text</li>
    <li id="unique7">text</li>
    <li id="unique8">text</li>
    <li id="unique9">text</li>
    <li id="unique10">text</li>
  </ul>
</div>

CSS

div {
  height: 200px;
}
ul:not(:nth-child(1)):not(:nth-child(2)){
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2 !important;
  
}
#unique1,
#unique2 {
  float: left;
  display: block;
  width: 20%;
  height: 200px;
  border: 1px solid black;
}