JSFiddle - React, Tailwind, and code Playground

by Beau_619

HTML

<div>
  <div class="block">
		<a class="a"></a>
	</div>
	<div class=blocks>
		<a class="a" style="background:blue;"></a>
	</div>  	
</div>

CSS

.block.moved {
    right: 300px;
  }

 .block {
     background: red;
     width: 100%;
     height: 100px;
     position: absolute;
     right: 0;
     z-index:2;
	 top: 35px;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .blocks{
 	 background: black;
     width: 300px;
     height: 100px;
     position: absolute;
     right: 0;
     top: 35px;
	 z-index:1;
  }
  .a{
  	background:green;
	width:30px;
	height:30px;
	position:absolute;
	top:20px;
	right:20px;
  }

JavaScript

var red_block = document.querySelector(".block");
[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
  red_block.classList.toggle("moved");
}, false)});