JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div class="div1">Div1</div>
<div class="middle">
  <div class="div2">Div2</div>
  <div class="div3">Div3</div>
</div>
<div class="div4">Div4</div>

CSS

.div1
{
    text-align: right;
    width:66%;
    border: 1px solid;
    margin-bottom: 10px;
    margin-left: 100px;
}

.div2
{
    width:80%;
    border: 1px solid;
    height: 100px;
    float: left;
    text-align: right;
    margin-left: 20px;
}

.div3
{   
    width:15%; 
    border: 1px solid;
    height: 100px;
    float: right;
}
.middle
{
    width:100%;
    overflow:hidden;
    margin-bottom:10px;
}
.div4
{
    text-align:left;
    width:80%;
    clear: both;
    border: 1px solid;
    margin-left: 20px;
}