JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="">кратко</a></li>
    <li><a href="">аарывоап ылва рыолвар лфыовра лоыва </a></li>

</ul>

CSS

ul,li{
    margin: 0;
    padding: 0;
}

*{
    box-sizing: border-box;
}

.nav{
    width: 100%;
    display: table;
 
}

.nav li{
    display: table-cell;
    padding: 0 5px;
    text-align: center;
}

.nav a{
    width: 100%;
    display: block;
    padding: 10px;
    background: #ccc;
    white-space: nowrap;
}