JSFiddle - React, Tailwind, and code Playground

by Borna Almasi

HTML

<div id="sideContainer">
   <div id="header">
       <div>Hello</div>
    </div>
    <div id="list">
       
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
    </ul>
    </div>
</div>

        <div id="content">
            <span>Test</span><button id="headerRemove">Remove</button>
            <button id="headerAdd">Add</button>
        </div>

CSS

body{ padding:0;}
#header,li{ margin-left:10px;}

#content {
    position:absolute;
    width: 80%;
    background-color: red;
    margin-left: 20%;
}

#sideContainer{
    position:absolute;
    height:95%;
    width:20%; 
}
#list{  
height:100%;    
overflow-y:scroll;
}
.hide{ visibility:hidden; }

JavaScript

$("#headerRemove").click(function () {
    $('#header div:last').remove();  
});
$("#headerAdd").click(function () {
    $('#header').append('<div>More!</div>');
});

$('#headerAdd , #headerRemove').click(
    function(){$('#sideContainer').height($(window).height()-$("#header").height());}
);