JSFiddle - React, Tailwind, and code Playground

HTML

Table gets it right:
<table>
    <tr>
        <td>
            <button>Short caption</button>
        </td>
        <td>
            <button>A much longer caption</button>
        </td>
    </tr>
</table>

<p></p>

CSS doesn't ("..caption" gets clipped):
<div class="button-row" >
    <button>Short caption</button>
    <button>A much longer caption</button>
</div>

CSS

button {
    white-space: nowrap;
}

table {
    margin: auto;
    /*table-layout: fixed;*/
}
td {
    width: 50%;
}
td button {
    width: 100%;
}

.button-row {
    display: table;
    margin: auto;
    table-layout: fixed;
}
.button-row button {
    display: table-cell;
    width: 150px;
    margin: 1px;
}