JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">foooooooooooooooooooooooooooooooooooooooooo</div><div class="bar"><div>bar</div></div>

CSS

.foo {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
}