<div class="box">
  <div class="box__child js-box__child">
    <p>width: <span class="js-width">0</span> px</p>
    <p>height: <span class="js-height">0</span> px</p>
    <p>callback fired: <span class="js-callback">0</span> times</p>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #eee;
}

.box__child {
  width: 80%;
  height: 80%;
  max-width: 500px;
  max-height: 200px;
  background: hotpink;
  padding: 2rem;
}

p {
  font-family: monospace;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
}
const box = document.querySelector('.js-box__child');
const widthElement = document.querySelector('.js-width');
const heightElement = document.querySelector('.js-height');
const callbackElement = document.querySelector('.js-callback');

let callbackFired = 0;

function updateDimensions() {
  const boxBCR = box.getBoundingClientRect();
  widthElement.textContent = boxBCR.width;
  heightElement.textContent = boxBCR.height;
}

updateDimensions();

window.addEventListener('resize', () => {
  callbackFired++;
  callbackElement.textContent = callbackFired;
  updateDimensions();
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.