JSFiddle - React, Tailwind, and code Playground

HTML

<section class="page">
    <header></header>
    <section class="editor"></section>
    <section class="attachments"></section>
    <footer></footer>
</section>

CSS

.page{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    background-color: #f00;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.page header{
    flex-grow: 0;
    flex-shrink: 0;
    
    background-color: #0f0;
    
    margin: 0 0 10px 20px;
    font-size: 0;
    line-height: 24px;
    height: 24px;
    padding: 15px 20px 15px 0;
    border-bottom:1px solid #ebeced;
    
}

.page footer{
    flex-grow: 0;
    flex-shrink: 0;

    background-color: #00f;
    
    height: 60px;
    line-height: 60px;
    text-align: right;
    font-size: 0;
    padding-right: 20px;
    border-top:1px solid #ebeced;   
}

.attachments{
    flex-grow: 1;
    flex-shrink: 1;
    
    background-color: #0ff;
    
    max-height: 148px;
    
    margin: 0 20px; 
    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
    overflow: auto;
}

.editor{
    flex-grow: 1;
    flex-shrink: 1;
    
    background-color: #ff0;

    margin: 0 20px;
    position: relative; 
    
    outline: none;
    color:#3c434a;
    font-size: 17px;
    line-height: 25px;
}