JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<head>
    <style>
    body {font-family:sans-serif;}
    .info {color:#666; margin-bottom:10px; text-align:center; }
    </style>
</head>
<body>
    <div class="info">The expandable content in this table will collapse completely if the window is small enough</div>
    <table border="1" style="table-layout:fixed; width:100%;">
        <td style="width:100px">Small</td>
        <td style="width:100px">Small</td>
        <td style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
            A large column with a whole bunch of text where we 
            can take advantage of a large browser window by showing
            as much as possible.
        </td>
        <td style="width:200px">Small</td>
    </table>
    <br/><br/>
    <div class="info">This one will display at least 100px of content in the expandable column:</div>
    <table border="1" style="table-layout:fixed; width:100%; min-width:500px;">
        <td style="width:100px">Small</td>
        <td style="width:100px">Small</td>
        <td style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
            A large column with a whole bunch of text where we 
            can take advantage of a large browser window by showing
            as much as possible.
        </td>
        <td style="width:200px">Small</td>
    </table>
</body>