JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="shrink-r">2) Yada yada yada</div>
    <div class="expand">1) Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada</div>
</div>

<div class="grid">
    <div class="shrink-r">2) Yada yada yada</div>
    <div class="expand">1) Yada yada yada</div>
</div>

<div class="grid">
    <div class="row">
        <div class="shrink-l">1) Yada yada</div>
        <div class="shrink-r">4) Yada yada</div>
        <div class="shrink-r">3) Yada</div>
        <div class="expand">2) Yada yada yada</div>
    </div>
    <div class="row">
        <div class="shrink-l">1) Yada</div>
        <div class="shrink-r">4) Yada</div>
        <div class="shrink-r">3) Yada</div>
        <div class="expand">2) Yada</div>
    </div>
</div>

CSS

grid {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;
}
.row {
    /* ??? */
}
.expand {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
    white-space: nowrap;
    text-overflow: ellipsis;
}
.shrink-l {
    float: left;/* Make this div as wide as its contents */
}
.shrink-r {
    float: right;/* Make this div as wide as its contents */
}

/* presentation */
.grid {
    margin: 10px 0;
}
.expand {
    border: solid 3px #f00;
    background: #fcc;
}
.shrink-r, .shrink-l {
    border: solid 3px #0f0;
    background: #cfc;
}