JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
    <tr>
        <th width='200px'>Heading</th>
        <th width='200px'>Heading of a different length</th>
        <th width='200px'>Another heading</th>
        <th width='200px'>Foo</th>
    </tr>            
    <tr>
        <th><input value="I work fine in Chrome" /></th>
        <th><input value="But not in firefox" /></th>
        <th><input value="Sumthin's up" /></th>
        <th><input value="Not wurkin'" /></th>
    </tr>
</thead>
</table>

CSS

th {
    width: 10px;
}

th input {
    min-width: 10px;
    max-width: 100%; 
    width: 100%;
}