JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <aside id="left">
    <section id="folders">
        <h2>Folders</h2> 
       <ul>
           <li>Folder 1</li>
           <li>Folder 2</li>
       </ul> 
        <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;      
}

JavaScript

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