JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<table>
    <tr>
        <td>
            <div id="input1"><input type="text" placeholder="width: 100px"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="input2"><input type="text" placeholder="width: 250px"></div>
        </td>
    </tr>
     <tr>
        <td>
            <div id="input3"><input type="text" placeholder="width: 500px"></div>
        </td>
    </tr>
</table>
</form>

CSS

table {
    width: 90%;
    height: 200px;
    border-spacing: 10px;
    border: 1px solid black;
    background-color: cornsilk;
}

div#input1 input {
    width: 100px;
}

div#input2 input {
    width: 250px;
}

div#input3 input {
    width: 500px;
}

td {
    border: 1px solid red;
}