JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

	<div class="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>

CSS

*{
	margin:0;
	padding:0;
}
.container{
	width:100%;
	max-width: 100%;
	max-height: 600px;
	overflow: hidden;
}
.box{
	height:600px;
	display:block;
	width:13.33333333%;
	border: 1px solid white;
	background-color:black;
	float:right;
	 position: relative;
	
}
.box:first-of-type{
	width:29.0%;
	background-color:orange;
}
.box:last-of-type{
	width:29.0%;
	background-color:blue;
}

JavaScript

$(function(){
	$(".box").click(function(){
		var isopened = $(this).attr("isopen");

			if(isopened == "true"){
				
				$(this).css("position","relative").css("width",$(this).attr("data-ow"));
				$(this).attr("isopen","false");
			}else{
				$(this).attr("data-ow", $(this).css("width"));
				$(this).css("position","relative").css("width","40%");
				$(this).attr("isopen","true");
			}
		
	});
});