JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<div class="left">
Stuff
</div>
<div class="main">
<center>
<span style="z-index: 5">
<img id="bx1" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
<img id="bx2" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
<img id="bx3" src="https://puu.sh/BlP2j/f573060de8.png" width="90px"></span>
<span class="lleft" id="bx0" style="padding-left: 90px; display: none; z-index: -1">
<img id="bx4" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
<img id="bx5" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
<img id="bx6" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
</span></center><br>
<button onclick="Btn()">Slide</button>
<br><br><br><br><br><br><br><br>
</div>

</div>


<script>
function Btn(){
	document.getElementById('bx1').classList.add('outward'); 
	document.getElementById('bx2').classList.add('outward'); 
	document.getElementById('bx3').classList.add('outward'); 
  document.getElementById('bx4').classList.add('inward'); 
  document.getElementById('bx5').classList.add('inward'); 
  document.getElementById('bx6').classList.add('inward'); 
  document.getElementById('bx0').removeAttribute('style'); 
  }
</script>

CSS

* {box-sizing: border-box;}

.row {display: flex; flex-wrap: wrap;}

.left {
    flex: 20%;
    background-color: #f1f1f1;
    padding: 20px;
}

.main {
    flex: 80%;
    background-color: white;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.lleft {position:absolute; left: 120px;}

* {box-sizing: border-box;}

/* Animations*/

.outward {
	animation-timing-function: ease;
    animation-name: myAnimation;
    animation-duration: 1.0s;
	animation-fill-mode: forwards;
}
.inward {
	animation-timing-function: cubic-bezier(.25,.1,.34,1.03);
    animation-name: myAnimation2;
    animation-duration: 1.0s;
	animation-fill-mode: forwards;
}

@keyframes myAnimation{
0%{opacity: 1;  transform: translateX(0);}
100%{ transform: translateX(1030px); opacity: 0; display: none;}
}

@keyframes myAnimation2{
0%{opacity: 0; transform: translateX(-1033px);}
100%{transform: translateX(0); opacity: 1;}
}