JSFiddle - React, Tailwind, and code Playground

HTML

<div class="right-panel">
		<div class="collapse-pane">
			<span class="expand">Expand</span>
		</div>
		<div style="width:0;" class="panel-body">
			<div style="display:none;" class="panel-body-inner">
				adsfasdfasdf
			</div>
		</div>
	</div>

CSS

.right-panel{
		position:fixed;
		right:0;
		top:0;
		bottom:0;
		border:1px solid #ccc;
		background-color:#efefef;
	}
.collapse-pane{
		margin-top:50px;
		width:60px;
		border:1px solid #999;
		cursor:pointer;
		/* Safari */
		-webkit-transform: rotate(-90deg);
		/* Firefox */
		-moz-transform: rotate(-90deg);
		/* IE */
		-ms-transform: rotate(-90deg);
		/* Opera */
		-o-transform: rotate(-90deg);
		/* Internet Explorer */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
	}
	.collapse-pane span{
		padding:5px;
	}

JavaScript

$(document).ready(function(){
		var height = $(".right-panel").height();
		$(".collapse-pane").css({marginTop: height/2 - 20});
		$('.collapse-pane').click(function(){
			if($(".collapse-pane span").html() == "Expand"){
				$(".panel-body").animate({width:200}, 400);
				$(".panel-body-inner").fadeIn(500);
				$(".collapse-pane span").html("Collapse");
			}else{
				$(".panel-body").animate({width:00}, 400);
				$(".panel-body-inner").fadeOut(300);
				$(".collapse-pane span").html("Expand");
			}
		});
	});