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 {
    display: block;
    overflow: scroll;
    border-collapse: collapse;
    width: 100%;
}
td {
    border:1px solid #ccc;
    padding: 3px;
    box-sizing: border-box;
    border-collapse: collapse;
}
td:nth-child(1) {
    min-width: 40px;
}
td:nth-child(2) {
    min-width: 40px;
}
td:nth-child(3) {
    min-width: 169px;
}