JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul
    ><li><a href="#"> <span>Ссылка 1</span> </a></li
    ><li><a href="#"> <span>Два</span> </a></li
    ><li><a href="#"> <span>Ссылка три (длинная)</span> </a></li
    ><li><a href="#"> <span>Ссылка 4</span> </a></li
    ><li><a href="#"> <span>Ссылка 5</span> </a></li
></ul>
</div>

CSS

DIV {border: 2px solid #00f; }
UL {background: #ccc; font-size: 16px; line-height: 1; list-style: none; margin: 0; overflow: hidden; padding: 14px 0 0; text-align: justify; text-align-last: justify; vertical-align: top; height: 30px; }
UL:after {content: ""; display: inline-block; width: 100%; height: 0; }
LI {display: inline; }
A {background: #ccc; color: #000; padding: 12px 0; text-decoration: none; }
A:hover {background: #00f; color: #fff; }

A:before,
A:after {content: '\200b'; }

A > SPAN {display: inline-block; }