JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <p>Table should scroll, but not this text.</p>
    <table>
        <thead>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>..</td>
                <td>..</td>
                <td>..........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
            </tr>
            <tr>
                <td>..</td>
                <td>..</td>
                <td>..</td>
            </tr>
        </tbody>
    </table>    
</div>

CSS

#wrapper {
    width: 250px;
    /* looking for solution that doesn't use overflow auto here */
}
table {
    border-collapse: collapse;
}
td {
    border:1px solid #ccc;
    padding: 3px;
}