JSFiddle - React, Tailwind, and code Playground

HTML

<table>
        <col><col><col class="fill-the-rest">
        <tr>
            <td>foo</td>
            <td>fooofooooofooooo</td>
            <td>
                <div class='outer'>
                    <div class='inner'>
                        Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>barbarbarbarbar</td>
            <td>bar</td>
            <td>
                <div class='outer'>
                    <div class='inner'>
                        Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                    </div>
                </div>
            </td>
        </tr>
    </table>

CSS

div.outer {
        position: relative;
    }
    div.inner {
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        width: 100%;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px dotted black;
        vertical-align: top;
    }
    col.fill-the-rest { width: 100%; }