JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul
{
     display: block;   
    overflow: hidden;
}
li
{
 float: left;
 display: block;   
}

JavaScript

function fixMenuPX()
{
    var parent = $("ul"),
        pWidth = parent.width(),
        children = parent.children(),
        chLength = children.length,
        chWidth = Math.floor(pWidth / chLength);
    
    children.css({ width : chWidth });   
}

function fixMenuPerc()
{
    var parent = $("ul"),
        pWidth = parent.width(),
        children = parent.children(),
        chLength = children.length,
        chPerc= 100 / chLength;
    
    children.css({ width : chPerc + "%" });   
}
    
fixMenuPerc();