JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class='st1' id='st1'><div id='disk1'></div>
    <div id='disk2'></div>
    <div id='disk3'></div>
  </div>
  <div class='st2' id='st2'></div>
  <div class='st3' id='st3'></div>
</div>
<input type='button' id="bt" onclick="MoveDisk('disk1','st3')" value='Click Me' />

CSS

#disk1 {
	width: 66px; 
	height: 60px;
	background-color: RGB(265,161,323); 
	margin: auto;
  border-radius: 5px;
  box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5);
}
#disk2 {
	width: 133px; 
	height: 60px;
	background-color: RGB(156,326,468); 
	margin: auto;
  border-radius: 5px;
  box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5);
}
#disk3 {
	width: 200px; 
	height: 60px;
	background-color: RGB(289,621,233); 
	margin: auto;
  border-radius: 5px;
  box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5);
}

#container {
	margin: 0 auto;
	background: #fc0;
	width: 750px;
	height: 200px;
	position: relative;
	padding-bottom: 50px;
}
#st1 {
	width: 250px;
	border-bottom: 2px solid black;
	position: absolute;
	bottom: 0;
}
#st2 {
	width: 250px;
	border-bottom: 2px solid black;
	position: absolute;
	bottom: 0;
	left: 250px;
}
#st3 {
	width: 250px;
	border-bottom: 2px solid black;
	position: absolute;
	bottom: 0;
	left: 500px;
}
.bt {
	clear: both;
}

JavaScript

var bt = document.getElementById("bt");

bt.onclick = function() {
	
  var rslt= document.getElementById('disk1');
  var item = document.getElementById('st3');
  item.insertBefore(rslt, item.childNodes[0]);

};