JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container container1">
    <div class="leftchild">left part</div>
    <div class="middlechild">center part, with wide content</div>
    <div class="rightchild">Right part
        <div>Subchild</div>
        <div>Subchild</div>
        <div>Subchild</div>
    </div>
</div>
<div class="container container2">
    <div class="leftchild">left part</div>
    <div class="middlechild">center part</div>
    <div class="rightchild">Right part
        <div>Subchild</div>
        <div>Subchild</div>
        <div>Subchild</div>
    </div>
</div>

CSS

.leftchild { background-color: #ffcccc; }
.middlechild { background-color: #ccffcc; }
.rightchild { background-color: #ccccff; }

.container {
    width: 350px;
    background-color: #eee;
    overflow: hidden;
    margin: 0 auto 20px;
}
.container1 .leftchild, .container1 .middlechild, .container1 .rightchild {
    float: left;
}
.container1 .rightchild div {
    float: left;
}
.container2 .leftchild, .container2 .middlechild, .container2 .rightchild {
    float: left;
    width: 30%;
}
.container2 .rightchild {
    float: right;
    width: 40%;
}
.container2 .rightchild div {
    float: left;
}