JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td>
                <div class="container">
                    <div class="content">This cells [sic] has more content</div>
                    <div class="spacer">This cells [sic] has more content</div>
                    <span>&nbsp;</span>
                </div>
            </td>
            <td>
                <div class="container">
                    <div class="content">Less content here</div>
                    <div class="spacer"> Less content here</div>
                    <span>&nbsp;</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    border: 1px solid #000;
    font-family: sans-serif;
    font-weight: bold;
}
td {
    border: 1px solid #000;
}
.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}