JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Довольно длинный пункт</a></li>
        <li><a href="#">Пункт короче</a></li>
        <li><a href="#">Слово</a></li>
        <li><a href="#">Последний пункт</a></li>
    </ul>
</nav>

CSS

nav {
    background: green;    
}
ul {
    font-size: 0;
    padding: 10px 0;
    display: table;
}
li {
    display: table-cell;
    font-size: 14px;
    vertical-align: middle;
}
li a {
    color: white;
    text-decoration: none;
    display: block;
    margin-right: .75em;
}