JSFiddle - React, Tailwind, and code Playground

HTML

<div class="link">
		<ul>
			<li><a id="box1"> box1 </a></li>
			<li><a id="box2"> box2 </a></li>
		</ul>
</div>
  
<div id="display1">
	<img src="http://globalgamejam.org/sites/default/files/styles/game_sidebar__normal/public/game/featured_image/promo_5.png?itok=9dymM8JD">
</div>

<div id="display2">
		<img src="https://s-media-cache-ak0.pinimg.com/564x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg">
</div>

CSS

.link{
	width: 30%;
	height: 100%;
	margin: 0 auto;
}

ul {
	padding: 0;
    list-style-type: none;
    overflow: hidden;
}

li{
	height: 13vh;
	padding-bottom: 5%;
}

li a {
	height: 75%;
	border: 1px solid white;
	border-radius: 5px 5px 5px 5px;
	background-color: rgba(79,87,89,0.9);
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	line-height: 10vh;
	transition: background-color 0.9s;
}

li a:hover{
	background-color: black;
	border: 2px solid white;
	font-weight: bold;
}

#display1{
	display: none;
	float:right;
	background-color: rgba( 0, 0, 0, 0.8); 
	color: white;
	width: 60%;
	margin-right: 30px;
}

#display1 img{
	width: 80%;
	height: 30%;
}

#display2{
	display: none;
	float:right;
	background-color: rgba( 0, 0, 0, 0.8); 
	color: white;
	width: 60%;
	margin-right: 30px;
}

#display2 img{
	width: 80%;
	height: 30%;
}

JavaScript

var link = document.getElementsByClassName("link")
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");


var display1 = document.getElementById("display1");
var display2 = document.getElementById("display2");

function movingLeft(){
	for( var i = 0; i < link.length ; i++)
	{
		link[i].style.float = "left";
		link[i].style.paddingLeft = "20px";
		link[i].style.position = "fixed";
	}
};

function backToCenter(){
	if( (display1.style.display === "none") &&
		(display2.style.display === "none") )
		{ 
			for( var i = 0; i < link.length; i++)
				link[i].style.float = "";
				link[i].style.position = "initial";
		}
}

box1.addEventListener("click", function(){
	if(display1.style.display === "none"){
		display1.style.display = "block";
		display1.style.float = "right";
		movingLeft();
	}
	else{
		display1.style.display = "none";
		backToCenter();
	}	
});

box2.addEventListener("click", function(){
	if(display2.style.display === "none"){
		display2.style.display = "block";
		display2.style.float = "right";
		movingLeft();
	}
	else{
		display2.style.display = "none";
		backToCenter();
	}	
});