JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class=box1>
  </div>
  <div class=box2-container>
    <div class=box2>
    </div>
  </div>
</div>

CSS

.box1 {
  width: 40px;
  height: 40px;
  background: red;
  position: absolute;
}

.box2-container {
  position: relative;
  height: 20px;
  width: 20px;
}

.box2 {
  width: 20px;
  height: 20px;
  background: blue;
  position: absolute;
  top: 50%; /* These values have to be changed when I want to recenter a new width and height from box1 */
  left: 50%;
}