JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin-bottom: 10px;">Use the button below to set the list's margin to a random value, this will cause the list to change dimensions and trigger a resize event.</div>
    
<button id="trigger">Trigger Resize</button>

<section id="wrap">
		<ul id="list">
			<li>I'm an unordered list</li>
			<li>I was last resized:</li>
			<li id="resize_time">No resizing detected yet!</li>
		</ul>
</section>

CSS

body {
  padding: 10px;
  margin: 0;
  background: #fff;
  font-family: Arial;
}
			
#wrap {
  margin: 20px 0 0;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
}

#list {
    display: block;
    margin: 10px;
    background: #CAE8F9;
}

.resize-sensor, .resize-sensor > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

JavaScript

function addFlowListener(element, type, fn){
		var flow = type == 'over';
		element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : type + 'flow', function(e){
			if (e.type == (type + 'flow') ||
			((e.orient == 0 && e.horizontalOverflow == flow) ||
			(e.orient == 1 && e.verticalOverflow == flow) ||
			(e.orient == 2 && e.horizontalOverflow == flow && e.verticalOverflow == flow))) {
				e.flow = type;
				return fn.call(this, e);
			}
		}, false);
	};
	
	function fireEvent(element, type, data, options){
		var options = options || {},
			event = document.createEvent('Event');
		event.initEvent(type, 'bubbles' in options ? options.bubbles : true, 'cancelable' in options ? options.cancelable : true);
		for (var z in data) event[z] = data[z];
		element.dispatchEvent(event);
    };
	
	function addResizeListener(element, fn){
		var resize = 'onresize' in element;
		if (!resize && !element._resizeSensor) {
			var sensor = element._resizeSensor = document.createElement('div');
				sensor.className = 'resize-sensor';
				sensor.innerHTML = '<div class="resize-overflow"><div></div></div><div class="resize-underflow"><div></div></div>';
				
			var x = 0, y = 0,
				first = sensor.firstElementChild.firstChild,
				last = sensor.lastElementChild.firstChild,
				matchFlow = function(event){
					var change = false,
						width = element.offsetWidth;
					if (x != width) {
						first.style.width = width - 1 + 'px';	
						last.style.width = width + 1 + 'px';
						change = true;
						x = width;
					}
					var height = element.offsetHeight;
					if (y != height) {
						first.style.height = height - 1 + 'px';
						last.style.height = height + 1 + 'px';	
						change = true;
						y = height;
					}
					if (change && event.currentTarget != element) fireEvent(element, 'resize');
				};
			
			if (getComputedStyle(element).position == 'static'){
				element.style.position = 'relative';
				element._resizeSensor._resetPosition =...