JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<ol>
   <li>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
      </ul>
   </li>
   <li>
      <ul>
         <li>test</li>
      </ul>           
   <li>
      <ul>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
      </ul>
   </li>
   <li>
      <ul>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
      </ul>
   </li>
<ol>

CSS

ol
{
    display: block;
}

ol > li
{
    width: 100%;
    display: table;
}

ol > li > ul
{
    display: table-row;
}

ol > li > ul > li
{
    width: 25%;
    display: table-cell;
}

ol > li:nth-child(2) > ul > li
{
    border:solid thin #000
}