JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td>
                <div class="container" data-spacer="This cells [sic] has more content"></div>
            </td>
            <td class="dont-truncate">Less content here</td>
        </tr>
    </tbody>
</table>

CSS

table {
    max-width: 100%;
    border: 1px solid #000;
    font-family: sans-serif;
    font-weight: bold;
}
td {
    border: 1px solid #000;
}
.container {
    position: relative;
}
.container:before {
    content: attr(data-spacer);
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container:after {
    content: attr(data-spacer);
    display: inline-block;
    height: 0;
    overflow: hidden;
}
.dont-truncate {
    white-space: nowrap;
}