<h1>ResizeObserver</h1>
  <div id="resize">
  </div>
  #resize{
    width:100px;
    height:100px;
    background-color:red;
    cursor:pointer;
  }
  #resize:hover{
    width:150px;
    height:150px;
    background-color:blue;
  }
  var ro = new ResizeObserver(function(mutationRecords){
    mutationRecords[0].target.textContent = mutationRecords[0].contentRect.width;
  });
  ro.observe( document.getElementById("resize"));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.