JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="colums-two">
      <li class="colleft">column 1</li>
      <li class="colright">column 2</li>      
      <li class="clr"><br class="clr" /></li>
      <li class="colleft">column 3</li>
      <li class="colright">column 4</li>
      <li class="clr"><br class="clr" /></li>
      <li class="colleft">column 5</li>
      <li class="colright">column 6</li>
      <li class="clr"><br class="clr" /></li>
    </ul>

CSS

ul.colums-two {
   list-style-type: none;
   margin: 0;
   padding: 0 0 20px 0; }

li.colleft {
   width: 75px;
   float: left;
   margin: 0;
   padding: 0 20px 10px 0; }
      
li.colright {
   float: left;
   margin: 0;
   padding: 0 0 10px 0;
   width: 75px; }

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
 }

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
 }