#box

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8d351;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2e2e2e;
  animation-name: variant-size;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes variant-size {
  from {
    width: 450px;
    height: 300px;
  }
  
  50% {
    width: 600px;
    height: 400px;
  }
  
  100% {
    width: 450px;
    height: 300px;
  }
}

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    var $target = entry.target
    $target.innerHTML = `${$target.clientWidth} x ${$target.clientHeight}`
  }
})

ro.observe(document.getElementById('box'))