JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
    <div id="wrapper">                
        <div id="lime">
            <div id="green">sfsdf</div>
            <span class="close">[X]</span>
        </div>
        <div id="white">
            TEXT
        </div>
    </div>

CSS

#header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: blue;
        }

        #wrapper {
            position: fixed;
            top: 100px;
            left: 0;
            right: 0;
            bottom: 0;
        }

    	#red {
            float: left;
            width: 200px;
            height: 100%;
            background: red;
        }
        
        #green {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 30px;
            background: green;
            display: none;
            cursor: pointer;
        }
        
        #lime .close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: pink;
            cursor: pointer;
        }
        
        #white {
            height: 100%;
            background: gray;
        }
        
        #lime {
            position: relative;
            float: left;
            width: 200px;
            height: 100%;
            background: lime;
            transition: width 0.5s;
        }
        
        #lime.collapsed {
            width: 30px;
        }
        
        #lime.collapsed * {
            display: none;
        }
        
        #lime.collapsed #green {
            display: block;
        }

JavaScript

$(function () {
    $('#lime .close').on('click', function () {
        $('#lime').addClass('collapsed');
    });
    
    $('#green').on('click', function () {
        $('#lime').removeClass('collapsed');
    });
});