JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <th>Short Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>Quite Long Header</th>
        <td>value</td>
    </tr>
    <tr>
        <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
        <td>value</td>
    </tr>
</table>

CSS

table {
    width: 100%;
}

th {
    text-align: right;
    width: 10px;
    white-space: nowrap;
    max-width: 300px;
    word-break: break-all;
}