JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="oben">1</div>
<div class="links">2</div>
<div class="rechts">3</div>
<div class="unten">
<textarea class="groesse" name="text"></textarea>

</div>
</div>

CSS

html, body {height:100%;} 

*{margin:0;}

.container{min-height: 100%;height:auto !important;position:relative;height:100%;background:#c0c0c0;width:100%;} 
.oben{position:absolute;top:0;width:100%;background:#ff0000;height:50px;}  
.links{background:#006600;width:20%;float:left;height:100%;}
.rechts{background:#440000;width:80%;margin-left:20%;height:100%;}

.unten{position:absolute;bottom:0;width:100%;background:#ff0000;}  

.groesse {resize: vertical;}