JSFiddle - React, Tailwind, and code Playground

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;
	}

    .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');
    });
    
});