JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo" class="resizable">
  <div id="size"></div>
</div>

CSS

.resizable {
  /* Make this the offset parent of the <object> */
  position: relative;
}

#demo {
  width: 100px;
  height: 100px;
  background-color: #def;
  /* Allow user resizing, for testing. */
  resize: both;
  overflow: hidden;
}

object.resize-detector {
  display: block;
  visibility: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

JavaScript

const div = document.getElementById('demo')
const obj = document.createElement('object')
obj.className = 'resize-detector'
obj.type = 'text/html'
obj.data = 'about:blank'
obj.addEventListener('load', function() {
  // Initialize once.
  handleResize()
  // Add resize handler on the <object>'s inner window.'
  obj.contentWindow.addEventListener('resize', function() {
    handleResize()
  })
})
div.appendChild(obj)

function handleResize() {
	document.getElementById('size').innerHTML = `${div.offsetWidth}Ă—${div.offsetHeight}`
}