JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" >
    <div class="small-box" style="left: 50%; top:0"></div>
</div>
<div class="line"></div>
<button class="button" onclick="updateState()">Update State</button>

CSS

.button {
  position: absolute;
  top: 0;
  left: 0;
}


.box {
  transition: 0.4s ease-in-out;
  position: absolute;
  background: #AAA;
  left: 0;
  top: 0;
}
.line {
  position: absolute;
  left: 300px;
  height: 100%;
  background: red;
  width: 1px;
}
.small-box {
  width: 10px;
  height: 10px;
  border: solid 1px black;
  position: absolute;
  transform: translateX(-50%);
}

JavaScript

const states = [
	{
  	height: '250px',
  	width: '500px',
  	transform: 'translate(50px, 50px)'
  },
	{
  	height: '150px',
  	width: '250px',
  	transform: 'translate(175px, 100px)'
  },
]

let currentState = 0;

function updateState() {
	const box = document.querySelector(".box");
  
  const state = states[currentState];
  
  currentState = (currentState + 1) % states.length
  
  box.style.height = state.height
  box.style.width = state.width
  box.style.transform = state.transform
}