JSFiddle - React, Tailwind, and code Playground

HTML

<div class=layout id=lo>
    <div class="left side">
        <div >
            left 1<br>go<br>go<br>go
        </div>
        <div >
            left 2<br>go<br>go<br>go
        </div>
    </div>
    <div class="right side">
        <div>
            right 1<br>go<br>go<br>go
        </div>
        <div >
            right 2
        </div>
    </div>
    <div class=center>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center<br>
        center        
    </div>
</div>

CSS

div.layout {
    background-color: #cccccc; 
    overflow:hidden;       
}
.left {
    float:left;
}
.right{
    float:right;     
}

.side {
    width: 100px;    
    margin: 10px;       
}
.side div { 
    background-color: #ffffff;
    border: 1px solid; 
}
.side div:first-child {
    margin-bottom: 10px;        
}

.center{
    overflow:hidden;      
    margin: 10px;  
    border: 1px solid;
    background-color: #ffffff;
}

JavaScript

var lo = $('#lo');
h = lo.height();
lo.find('div.center').height(h-22); // 20 - компенсация margin и border-width
lo.find('div.left div:last, div.right div:last').each(function() {
    t = $(this);
    t.height(lo.height()-34-t.prev().height()); // 34 - компенсация margin и border-width
});