JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="info">
        Info
    </div>
    <div id="detail">
        Detail
    </div>
    <div id="fix">
        fix
    </div>
    
    
    
</div>

CSS

#fix {
	width: 297px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: grey;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	position: absolute;
    right: 0;
    top: 0;
	display:inline-block;
    height: 400px;
}

#info {
	width: 30px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: lightblue;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	display: inline-block;
	height:400px;
}

#detail {
	width: 80px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: silver;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	display: inline-block;
	height:400px;
}

#info,
#detail{
    position: absolute;
    right: 297px;
}


#main{
	margin-left: auto;
    margin-right: auto;
    width: 410px;
    position: relative;
}

JavaScript

$( document ).ready(function() {
   				$("#detail").hide();
   				
   			$("#info").click(function () {
					$("#info").hide();
   					$('#detail').show();
			});

			$("#detail").click(function () {
					$("#info").show();
   					$("#detail").hide();
			});
		});