JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

CSS

ul {
   list-style-type:none;
    margin: 0px;
    padding: 0px;
}
li {
   float:left;
    margin-right: 10px;
    background-color: red;
    min-width: 10px;
}

li.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

li.fixed {
    width: 150px;
    text-align: center;
}