JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left"></div>
<div id="right"></div>

CSS

html,body {
	padding:0;
	margin:0;
	height:100%;
	min-height:100%;
	background-color: #000000;
}
p { 
	cursor: pointer;
	color: #FFF;
}
#left, #right {
	width: 50%;
	height: 100%;
	cursor: pointer;
    position: absolute;
}
#left {
    left:0;
    background: #666;
}
#right {
	background: #063;
	right: 0;
}

JavaScript

var Z = 0;
$('#left').click(function(){
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500);
});




$('#right').click(function(){
	$('#right').css('z-index',Z++).animate({width:'100%'}, 2500);
});