JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table>
        <tr>
            <td>Foo</td>
            <td>Bar</td>
        </tr>
        <tr>
            <td>foo foo foo foo foo foo foo foo foo foo foo foo foo foo</td>
            <td>bar bar bar bar bar bar bar bar bar bar bar bar bar bar</td>
        </tr>
    </table>
</div>

CSS

.container
{
    background: yellow;
    width: 400px;
}

table
{
    table-layout: fixed;
    width: 100%;
}

td
{
    white-space:pre;
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
}