JSFiddle - React, Tailwind, and code Playground

HTML

Wonky:
<table class="hundred">
    <tr>
        <td class="q"><div class="tbl"><input type="text" class="cell hundred" value="Input" /><div class="cell one-percent">Foo</div></div></td>
        <td class="w"><input type="text" class="hundred" value="Input" /></td>
    </tr>
</table>
<hr />
"Fixed" by removing the <code>one-percent</code> class:
<table class="hundred">
    <tr>
        <td class="q"><div class="tbl"><input type="text" class="cell hundred" value="Input" /><div class="cell">Foo</div></div></td>
        <td class="w"><input type="text" class="hundred" value="Input" /></td>
    </tr>
</table>

CSS

.tbl {
    display: table;
}
.cell {
    display: table-cell;
}
.one-percent {
    width: 1%;
}
.hundred {
    width: 100%;
}
.q {
    background-color: yellow;
}
.w {
    background-color: lime;
}