JSFiddle - React, Tailwind, and code Playground

by Raunak Kathuria

HTML

<div class="window-width-container">
    <div class="wrapper">
        <div class="head">head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head head head head head head head head head head head head head head head head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
</div>

CSS

.window-width-container {
    width: 100%
}
.wrapper {
    flex: 1;
}
.head, .tail {
    display: inline-block;
}
.head {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tail {
    overflow: hidden;
}