JSFiddle - React, Tailwind, and code Playground

HTML

<div id="transition">
  Content
</div>
<button onclick="grow()">
  Grow the div
</button>
<div id="result">

</div>

CSS

#transition{
  background-color: yellow;
  transition: width 2s;
  width: 100px;
}

JavaScript

var div = document.getElementById('transition');
var result = document.getElementById('result');

window.grow = function(){
	var width = div.offsetWidth + 50;
  div.style.width = width + 'px';
}

var count = 0;
div.addEventListener('transitionend', function(){
  result.innerHTML = "transitionend has fired " + ++count + " times";
}, { once: true });