JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <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>
</div>

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{
    width:50%;
    padding:25px 50px;
}
p{
    overflow:hidden;
    width:50%;
    padding: 25px 50px 50px;
    border-left:1px solid;
    padding-bottom:50px;
}
.container{
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}