JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<ul>
    <li><a href="#">первый</a></li>
    <li><a href="#">второй</a></li>
    <li><a href="#">номер три</a></li>
    <li><a href="#">4-й</a></li>    
</ul>
<ul class="menu">
    <li><a href="#">первый</a></li>
    <li><a href="#">второй</a></li>
    <li><a href="#">номер три</a></li>
    <li><a href="#">4-й</a></li>    
</ul>

CSS

* {
    margin:0;
    padding:0;
}
ul {
    float:left;
    width:100%;
    background:#cff;
    margin:10px 0;
    overflow:hidden;
}
li {
    list-style:none;
    float:left;
}
li:last-child {
    margin-right:-1px;
}
a {
    display:inline-block;
    text-decoration:none;
    background:#eee;
    padding:10px 0;
    color:#444;
    text-align:center;
}
a:hover {
    background:#444;
    color:#fff;
}

JavaScript

jQuery(function($) {
   
    var list = $('.menu');
    var listw = list.children().last().position().left + list.children().last().width();
    var fix = list.width() / listw;
	list.children().children().each(function(idx,el){
		$(this).width($(this).width()*fix);
	});
});