JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <body>
        <table>
            <tr>
                <td class='btnCell'>button 1</td>
                <td> <span class='nowr'>
                    some longer text which we only want on 1 row some longer text which we only want on 1 row some longer text which we only want on 1 row</span>

                </td>
                <td class='btnCell'>button 2</td>
                <tr>
        </table>
        
        <body>

</html>

CSS

table {
    width: 100%;
}
.btnCell {
    /*width:50px;*/
}
.nowr {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*width: 200px;*/
}