JSFiddle - React, Tailwind, and code Playground

HTML

<div id='Picture_container'>
		picture container
		<div id='thePicture'>
			the picture goes here
		</div>
</div>

<div id="commentsBox">
	 <div id="comments">
	    I am a sticky-out comments box
	 </div>

	 <div id="clickme">
   click me!
	 </div>
</div>

CSS

#Picture_container {
  width:auto;
	background-color: yellow;
	overflow-x: auto;
}

#thePicture {
	height: 300px;
	width: 400px; /* this will change when the page loads */
	background-color: green;
	left: 0px;
	right: 0px;
	margin-left: auto;
	margin-right: auto;
}

#commentsBox {
    background: #00FFFF;
    position: absolute;
    width: 150px;
    height: 400px;
    right:-150px;
    top: 10px;
}
    
#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 20px;
    width: 400px;
    background: #5F9EA0;
    text-align: center;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

#comments {
    float:left;
}

JavaScript

var showingComments = false;

$("#clickme").click(function () {
   if (showingComments == false) {
   	showingComments = true;
   	$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
   } else {
   	showingComments = false;
   	$(this).parent().animate({right:'-150px'}, {queue: false, duration: 500});
   }
});