<div class="box">
  <h3 class="info"></h3>
</div>
<div class="box small">
  <h3 class="info"></h3>
</div>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2vw;
  box-sizing: border-box;
}
.box {
  text-align: center;
  height: 20vh;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.25);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vw
}

.box h3 {
  color: #fff;
  margin: 0;
  font-size: 5vmin;
  text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.box.small {
  max-width: 550px;
  margin: 1rem auto;
}

const boxes = document.querySelectorAll('.box');

let callbackFired = 0;

const myObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    callbackFired++
    const infoEl = entry.target.querySelector('.info');
    const width = Math.floor(entry.contentRect.width);
    const height = Math.floor(entry.contentRect.height);

    const angle = Math.floor(width / 360 * 100);
    const gradient = `linear-gradient(${ angle }deg, rgba(0,143,104,1) 50%, rgba(250,224,66,1) 50%)`;

    entry.target.style.background = gradient;

    infoEl.innerText = `
      I'm ${ width }px and ${ height }px tall

      Callback fired: ${callbackFired}
    `;
  }
});

boxes.forEach(box => {
  myObserver.observe(box);
});