JSFiddle - React, Tailwind, and code Playground

HTML

These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

CSS

ul {
    border:1px dotted black;
    padding: 0;
}
ul:after {     
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0;
    height: 0;
}
li {
    background-color: red;
    display:block;
    float: left;
}
li:nth-child(2n) {
    background-color: #0F0;
}

#ul1 li{
    width: 25%
}

#ul2 li{
    width: 20%
}