JSFiddle - React, Tailwind, and code Playground

HTML

<h2>huh?</h2>
<table>
    <tbody>
        <tr>
            <td>
                <div class="100 pink">100%</div>
            </td>
            <td>
                <input placeholder="other" type="text" />
            </td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <td>
                <div class="100 pink">100%</div>
            </td>
            <td>
                <div class="100">Something else</div>
            </td>
        </tr>
    </tbody>
</table>

<h2>Why aren't they like these guys?</h2>
<table>
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                2
            </td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <td>
                <input />
            </td>
            <td>
                <input />
            </td>
        </tr>
    </tbody>
</table>

CSS

td {
    border: 1px solid grey;
}
table {
    width: 100%;
    table-layout: fixed;
}

.100 {
    display: inline-block;
    width: 100%;
}

.pink {
    background-color: pink;
}

input {
    width: 100%;
    box-sizing: border-box;
}