JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">left</div>
<div class="right">
    right<br />
    right<br />
    right<br />
    right<br />
</div>
<div class="center">
    <div class="green">
        <div class="yellow"></div>
        text text text<br />
        text text text<br />
        text text text
    </div>
    <div class="green">
        <div class="yellow"></div>
        text text text<br />
        text text text<br />
        text text text
    </div>
</div>

CSS

.left {
    float: left;
}

.right {
    float: right;
}

.left, .right {
    background: red;
    width: 100px;
}

.center {
    margin: 0 110px;
}

.green {
    background: lightgreen;
    overflow: hidden;
    margin-bottom: 10px;
}

.yellow {
    float: left;
    width: 49px;
    height: 49px;
    background: yellow;
    border: black 1px solid;
}