JSFiddle - React, Tailwind, and code Playground

HTML

<div class="order_tools_container">
	<input class="slider_check leftbar_input" type="checkbox">
	<input class="slider_check middlebar_input" type="checkbox">
	<input class="slider_check rightbar_input" type="checkbox">
	<script src="https://use.fontawesome.com/b26dc7d2ea.js"></script>
  <link href="https://use.fontawesome.com/b26dc7d2ea.css" media="all" rel="stylesheet">
  <div class="bar_container leftbar_container">
		<label data-checkbox="leftbar_input">
			<i class="fa fa-chevron-left" aria-hidden="true"></i>
		</label>
		<div class="bar_main">test
		</div>
	</div>
	<div class="bar_container middle_sec">
		<p class="search_container">
			<input type="search" class="order_search" name="order_search" spellcheck="false">
		</p>
		<label data-checkbox="middlebar_input">
			<i class="fa fa-chevron-up" aria-hidden="true"></i>
		</label>
		<div class="bar_main box_container">test
		</div>
	</div>
	<div class="bar_container rightbar_container">
		<label data-checkbox="rightbar_input">
			<i class="fa fa-chevron-right" aria-hidden="true"></i>
		</label>
		<div class="bar_main">test
		</div>
	</div>
</div>

CSS

html,
body,
.order_tools_container {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.order_tools_container{
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
.bar_container{
	display: flex;
}
.bar_main{
	flex: 1;
}
.leftbar_container .bar_main, .rightbar_container .bar_main{
	width: 250px;
	background-color: #00162C;
	transition: 0.5s;
}
.search_container{
	height: 50px;
	margin: 0;
	transition: 0.5s;
}
.leftbar_container label{
	order: 1;
}
.bar_container label{
	cursor: pointer;
	padding: 2.5px;
	background-color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bar_container label:hover{
	background-color: lightgray;
}
.middle_sec{
	flex-flow: column;
	flex: 1;
}
.search_container, .bar_main{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	min-height: 20px;
}
.slider_check{
	display: none;
}
.leftbar_input:checked ~ .leftbar_container .bar_main{
	margin-left: -250px;
}
.middlebar_input:checked ~ .middle_sec .search_container{
	margin-top: -50px;
}
.rightbar_input:checked ~ .rightbar_container .bar_main{
	margin-right: -250px;
}
.leftbar_input:checked ~ .leftbar_container label,
.middlebar_input:checked ~ .middle_sec label,
.rightbar_input:checked ~ .rightbar_container label{
	transform: scale(-1);
}

JavaScript

$(function(){
	slideBars();
});
function slideBars(){
	var labels = $(".bar_container label");
	labels.on('click', function(){
		var checkBox = $("." + $(this).data("checkbox"));
		checkBox.prop("checked", !checkBox.prop("checked"));
	});
}