JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="right">
        <p>even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. even more goes here. </p>
    </div>
    <div id="wrap">
        <div id="left">
              <p>some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. some content. </p>
        </div>      
        <div id="center">
            <p>more content. more content. more content. more content. more content. more content. more content. more content. more content. more content. more content. more content. </p>
            
        </div>
    </div>
</div>

CSS

#container div {
    height: 200px;    
}
#right {
    float: right;
    background: #ddd;
     padding: 10px;
}
#left {
    float: left;
    background: #bbb;
     padding: 10px;
    margin-right: 10px;
}
#center {
    background: #ccc;
    padding: 10px;
}