JSFiddle - React, Tailwind, and code Playground

by Rupesh Kokal

HTML

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

CSS

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

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

#left h2 {
   background-color: gray; 
}

#left #folders {
   background: red;
   display: block;
   position: relative;
   -webkit-box-flex: 2;
    -webkit-flex: 2; 
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

#left #tasks {
   display: block;    
   background-color: green;
   position: relative;
   -webkit-box-flex: 1;
    -webkit-flex: 1; 
}

#content {
   -webkit-box-flex: 2; 
    -webkit-flex: 2; 
    background-color: yellow;      
}

JavaScript

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

$('#addTask').click(function(e) {
    $('#tasks ul').append('<li>A Task</li>');   
});