JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="truncate">
            <div class="truncated">I'm getting truncated because I'm way too long to fit</div>
        </td>
        <td class="some-width">Don't truncate me.</td>
    </tr>
</table>

CSS

table {
    width: 100%;
}
td {
    border: 1px solid black;
}
.truncate {
    display: table;
    table-layout: fixed;
    width: 100%;
}
div.truncated {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.some-width {
    white-space: nowrap;
}