JSFiddle - React, Tailwind, and code Playground

by Aaron Morgan

HTML

<div id="container">
    <div class="left animate">
        <button id="hide">Hide</button>
    </div>
    <div class="right animate">
        <div class="center-right">Should be centered
            <button id="show">Show</button>
        </div>
    </div>
</div>

CSS

body, html {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #container {
        width: 100%;
        height: 100%;
    }
    .left {
        width: 25%;
        float: left;
        height: 100%;
        max-width: 330px;
        background-color: #ff0000;
    }
    .right {
        width: 70%;
        padding: 10px;
        float: left;
        height: 100%;
        background-color: #00ff00;
        position: relative;
    }
    .center-right {
        width: 100%;
        max-width: 1000px;
        height: 500px;
        background-color: #0000ff;
        margin-left: auto;
        margin-right: auto;
    }
    .animate {
        -webkit-transition: width 1s, margin 1s;
        /* For Safari 3.1 to 6.0 */
        transition: width 1s, margin 1s;
    }

JavaScript

$(document).ready(function () {
    $("#hide").click(function () {
        $(".left").css({
            "marginLeft": "-25%"
        });
        $(".right").css({
            "width": "100%"
        });
    });

    $("#show").click(function () {
        $(".left").css({
            "marginLeft": "0%"
        });
        $(".right").css({
            "width": ""
        });
        console.log('d');
    });

});