JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class='content'>Width based on content</li>
    <li class='spacer50'>&nbsp;</li>
    <li class='fluidme'>fluid</li>
    <li class='spacer20'>&nbsp;</li>
    <li class='content'>width based on content</li>
    <li class='content'>width based on content xxx</li>
</ul>

CSS

ul li {
    display: inline-block;
}
.content {
    height: 40px;
    border: 1px solid black;
}
.spacer50 {
    width: 50px;
    height: 40px;
    background-color: red;
}
.spacer20 {
    width: 20px;
    height: 40px;
    background-color: green;
}

.fluidme {
    width: 20%;
    height: 40px;
    border: 1px solid green;
}