JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left" class="toggWidth"></div>
<div id="right" class="toggWidth"></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

$('.toggWidth').click(function(){
	$(this)
    .stop()
    .animate({width:'100%'}, 2500)
    .siblings('.toggWidth')
    .stop()
    .animate({width:'0%'}, 2500);
});