JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="small">First column with text</td>
        <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
        <td class="small">Small column</td>
    </tr>
</table>

CSS

table {
    margin-top: 50px;
}
table td {
    white-space: nowrap;
}
table td:nth-child(1) {
    background-color:red;
}
table td:nth-child(2) {
    background-color: green;
}
table td:nth-child(3) {
    background-color: orange;
}