JSFiddle - React, Tailwind, and code Playground

by jomanlk

HTML

<div class='wrap'>
    <h2>One</h2>
    <div class='state'>True</div>
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div>
</div>

<div class='wrap'>
    <h2>Two</h2>
    <div class='state'>True</div>
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div>
</div>

CSS

.wrap {
    overflow:auto;
    margin-bottom: 10px;
    
}

h2 {
    display:block;
    background:#AA0000;
}

.state {
    float: left;
    width: 10%;
    background:#00AA00;
}

.text {
    float:right;
    width:80%;
    background:#0000AA;
}