JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="header"></div>
    <div class="content">
        <div class="leftbar"></div>
        <div class="noname-block1">
                    1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231       1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 
       
        </div>
        <div class="noname-blocks-wrap">
           <div class="right-bar"></div>
           <div class="noname-block2">
        1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231       1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 1231231 
           </div> 
        </div>
    </div>
</div>

CSS

.wrap{
    min-width:1000px;
    max-width:1260px;
    margin:0 auto;
    color:white;
}

.header{
    background: red;
    height: 100px;
}

.leftbar{
    width:300px;
    float:left;
    background: green;
    height:400px;
 
}

.noname-block1{
    margin-left:300px;
    background:blue;
    height:150px;
}

.right-bar{
    float:right;
    width:200px;
    background: lightblue;
    height: 250px;
}
.noname-block2{
    margin-right: 200px;
    background: black;
    height: 250px;
}