JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="t">
    
    
    
    
    <div class="row">
        <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
    
    <div class="row">
       <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="container">
            <div class="cell">Caption:</div>
            <div class="cell"><input type="text" /></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
    
</div>

CSS

input{
    width: 200px;   
    
}

.row{
    border: 1px solid red;   
    overflow: hidden;
    
    
}

.container{
    width:  50%;
    float: left;
}

.cell{
    
    float: left;
    width: 50%; 
    margin: 0;
    padding: 0;
    display: block;
    
}

.clear{
    clear: both;
    margin: 0;
    padding: 0;
    width: auto;  
}