JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <aside id="left">
    <section id="folders">
        <h2>Folders</h2>
        <div class="scrollbox">
           <ul>
               <li>Folder 1</li>
               <li>Folder 2</li>
           </ul> 
        </div>
        <a href="#" id="add">Add Folder</a>        
    </section>
    <section id="tasks">
        <h2>Tasks</h2> 
       <ul>
          
       </ul>  
    </section>  
  </aside>
  <section id="content">
     Some content
  </section>    
<div>

CSS

#container {
   display: -webkit-box;
   -webkit-box-orient: horizontal;  
    min-height: 300px;   
}

#left {
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;    
}

#left h2 {
   background-color: gray; 
}

#left #folders {
   -webkit-box-flex: 2;
   background-color: red;  
}

#left #tasks {
   -webkit-box-flex: 1; 
   background-color: green;  
}

#content {
   -webkit-box-flex: 2; 
    background-color: yellow;      
}
#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}
.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}
.scrollbox > * {
    height: 0;
}

JavaScript

$('#add').click(function(e) {
   $('#folders ul').append('<li>A folder</li>');   
})