JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <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 class="shrink">2) Yada yada yada</div>
</div>

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

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

CSS

.grid {
    display: table;
    table-layout: auto;
    width: 100%;
}
.row {
    display: table-row;
}
.expand {
    display: table-cell;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shrink {
    display: table-cell;
    white-space: nowrap;
}

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