JSFiddle - React, Tailwind, and code Playground

HTML

<div> 
    <ul>
        <li>100</li>
        <li>200</li>
        <li class="last">300</li>
    </ul>
</div>

CSS

div { width: 300px; height: 30px; background: yellow; }
ul {
    width: 300px;
    height: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}
    ul li {
        height: 30px;
        line-height: 35px;
        padding: 0 20px;
        margin-left: 5px;
        float: left;
        background: red;
    }
    li.last {
        width: 111px;
        background: grey;
    }