JSFiddle - React, Tailwind, and code Playground

HTML

<label id="label"></label><br>
<p>Нажмите на блок чтобы добавить в него текст</p>
<div id="resize">
    <div class="block foo"></div>
    <div class="block bar"></div>
    <div class="block baz">
      <div class="block small-block"></div>
    </div>
</div>

CSS

#resize {
  display: inline-block;
  border: 5px solid green;
}
/* Callback будет срабатывать при изменении любого элемента внутри */
#resize * {
  transition-property: all;
  transition-duration: 1ms;
}
.block {
  box-sizing: border-box;
  width: 100px;
  min-height: 100px;
  float: left;
  border: 5px solid red;
}
.small-block {
  margin: 20px;
  width: 50px;
  min-height: 50px;
}
.foo:hover {width: 150px; min-height: 150px;}
.bar:hover {margin: 20px;}
.baz:hover {padding: 20px 0;}
.small-block:hover {margin: 30px 20px;}

JavaScript

document.body.addEventListener("click", function (e) {
  e.target.innerHTML += "<p>Текст</p>";
}, false);

var label = document.getElementById("label");
var el = document.getElementById("resize");
function showSizes() {
  label.innerText = "Размеры: " + el.clientWidth + " X " + el.clientHeight;
}

showSizes();
el.addEventListener("transitionend", showSizes, false);
el.addEventListener("DOMSubtreeModified", showSizes, false);