JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    
        <li>1</li>    
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
    
</ul>
<ul>
   
        <li>1</li>    
        <li>2</li>
        <li>3</li>
       
   
</ul>
<ul>
   
        <li>1</li>    
        <li>2</li>
        
      
   
</ul>

<ul>
   
        <li>1</li>    
        
       
      
   
</ul>

CSS

ul { margin-bottom: 10px; display:table;table-layout: fixed; width: 100%;}
ul li {display: table-cell;border: 1px solid #000; width: 25%; text-align: center;}