JSFiddle - React, Tailwind, and code Playground

HTML

<div class=" ">
<ul class="container">
    <li>Link One</li>
    <li>Link Two</li>
    <li>Link Three</li>
</ul>
</div>

CSS

.container {
    width: 300px;
    list-style-type: none;
    background-color: yellow;
    direction: rtl;
    overflow: hidden;
}

.container li {
    width: 30px;
    display:inline;
    background-color: cyan;
    white-space: nowrap;
}
.container li:first-child {
    float:left;
}
.container li + li {
    float: right;
}
    
}