JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="col full">
    <input type="text" />
</div>
<div class="col onethird">
    <input type="text" />
</div>
<div class="col twothirds">
    <input type="text" />
</div>
<div class="col twothirds">
    <div class="col half">
        <input type="text" />
    </div>
    <div class="col half">
        <div class="col onethird">
            <input type="text" />
        </div>
        <div class="col twothirds">
            <input type="text" />
        </div>
    </div>
</div>
<div class="col onethird">
    <div class="col half">
        <input type="text" />
    </div>
    <div class="col half">
        <input type="text" />
    </div>
</div>

CSS

body, html {
    padding: 0;
}

input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
    padding: 10px;
    width: 100%;
}
.col {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
    float: left;
    padding: 10px;
}
.col .col {
    padding: 0 10px;
}
.col .col:first-child {
    padding-left: 0;
}
.col .col:last-child {
    padding-right: 0;
}

.full {
    width: 100%;
}

.half {
    width: 50%;
}

.onethird {
    width: 33.3333333%;
}

.twothirds {
    width: 66.6666666%;
}