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">
    <div>
        <button>Short caption</button>
    </div>
    <div>
        <button>A much longer caption</button>
    </div>
</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>div {
    display: table-cell;
    width: 50%;
}
.button-row button {
    width:100%;
}