JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cpBtnRgt" onclick="toggleCPRgt()">
					<div></div>
					<div></div>
					<div></div>
				</div>
<div id="cpRgt">
		</div>

CSS

#cpBtnRgt {right:20px;clear:right;margin:9px 6px 0 0;float:right}
#cpBtnRgt {
	position:fixed;
	width:40px;
	height:33px;
	background:#59596E;
	background:rgba(0,0,0,.2);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	padding:6px 6px 0 6px;
	cursor:pointer;
	box-shadow:0 1px 1px rgba(0,0,0,.4)inset, 0 1px 0 rgba(255,255,255,.2)}
#cpBtnRgt:hover div {background: #FFA144}
#cpBtnRgt > div {width:100%;height:4px;background:#999;margin:0 0 4px 0;border-radius:4px;box-shadow: #000 0 1px 1px;transition: 0.3s linear 0s}

JavaScript

function toggleCPRgt(){
						var cpRgt = document.getElementById("cpRgt");
						cpRgt.style.height = window.innerHeight - 60+"px";
						if(cpRgt.style.right == "0px"){
							cpRgt.style.right = "300px";
						} else {
							cpRgt.style.right = "0px";
						}
					}