JSFiddle - React, Tailwind, and code Playground

HTML

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td class="truncate">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

CSS

body { margin: 0; }

.main-table {
    width: 100%;
}

.truncate { text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100px; }

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}