JSFiddle - React, Tailwind, and code Playground

by hbirjand

HTML

<h1><a href="templatehouse.ir" target="_blank">hbirjand</a></h1>
<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>By using Table Layout CSS Property You Will Achieve The Goal</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;
}