JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

CSS

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}