JSFiddle - React, Tailwind, and code Playground
HTML
<label><input type=text></label>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<label><input type=text></label>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<label><input type=text></label>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<label><input type=text></label>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<label><input type=text></label>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
CSS
body, body *{
margin:0;
padding:0;
}
label,p{
box-sizing:border-box;
}
input{
background: #ccc;
border:none;
border-radius:5px;
width:100%;
height:30px;
}
label{
float: left;
width:50%;
padding:0 50px;
}
p{
overflow:hidden;
width:50%;
padding: 0 50px 50px;
border-left:1px solid;
padding-bottom:50px;
}
label:first-of-type,
p:first-of-type{
padding-top:50px;
}