JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>
            <ul>
                <li><a href="#">11</a></li>
                <li><a href="#">12</a></li>
                <li><a href="#">13</a></li>
                <li><a href="#">14</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">21</a></li>
                <li><a href="#">22</a></li>
                <li><a href="#">23</a></li>
                <li><a href="#">24</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a href="#">31</a></li>
                <li><a href="#">32</a></li>
                <li><a href="#">33</a></li>            
            </ul>
        </li>
    </ul>
</div>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100% !important;
}
div > ul{
    display: block;    
    width: 100%;
}
div > ul > li {
  width: auto;
}
div > ul ul{
    display: table;
    table-layout: fixed;
}
div > ul ul li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  line-height: 0.9;
  padding: 5px 20px;
  width: 25%;
}