JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<div id="container">
    <div class="col row">
        <div class="col menu overflow-y">
            <ul class="nav">
                <li><button class="menu-toggle">=</button></li>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </div>
        <div class="col content overflow-y overflow-x">
            <p>content dlkfjgjkfldg jklhdf lsgjkh dlksfjgh lkdjfhsg lkjdshf glkjdfsh glkjdhsf glkjhds flkjgh ldskjfhg lkjsdfhg lkjdsfhg lkjdsfhglkjdsfh glkjdfhs glkjdfsh glkjdhf glkjhdfslkgjhdlfksjgh lkjdsfhglkjdsfhgkljdsfhg lkjdsfhglkjdshfglkjdhf glkjdhfsglkjdhsfglkjdshfglkjdsfhg lkjsdf</p>
        </div>
    </div>
</div>

CSS

div {
    border: 1px solid;
}

.nav {
    list-style: none;
}

.nav > li {
    padding: none;
    margin: none;
}

#container {
    min-width: 300px;
    max-width: 500px;
    min-height: 400px;
    position: relative;
}

#div1 {
    float: left;
    width: 200px;
    background-color: yellow;
}

.row, .col { overflow: hidden; position: absolute; }
.col { top: 0; bottom: 0; }
.row { left: 0; right: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.menu {
    width: 100px;
    white-space: nowrap;
    transition: width 0.2s;
}

.menu.collapsed {
    width: 60px;
}

.content {
    left: 100px;
    right: 0;
    transition: left 0.2s;
    padding: 7px;
}

.content.collapsed {
    left: 60px;
}

JavaScript

var $menu = $(".menu");
var $content = $(".content");
$(".menu-toggle").on("click", function() {
    $menu.toggleClass("collapsed");
    $content.toggleClass("collapsed");
});