JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<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 {
	width: 50%;
	height: 100%;
	background: #666;
	float: left;
	cursor: pointer;
    position: absolute;
}
#right {
	width: 50%;
	height: 100%;
	background: #063;
	float: right;
	cursor: pointer;	
}

JavaScript

$('#left').click(function(){
	$('#left').animate({width:'100%'}, 2500);
});




$('#right').click(function(){
	$('#left').animate({width:'0%'}, 2500);
    $('#right').animate({width:'100%'}, 2500);
});