JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    transition: width 0.5s, height 6s;
}

.animate {
    width: 400px;
    height: 400px;
}

JavaScript

function getMaxTransitionDuration(el) {
	function extract(str) {
    return str
      .replace(/[A-Z]/gi, "")
      .split(", ")
      .map(parseFloat);
  };
  var style = getComputedStyle(el);
  var props = style.transitionProperty.split(", ");
  var delays = extract(style.transitionDelay);
  var durations = extract(style.transitionDuration);
  
  var totals = durations.map(function(v, i) {
    return v + delays[i];
  });
  var max = totals[0]; 
  var maxIndex = 0;
  for (var i = 1; i < totals.length; i++) {
    if (totals[i] > max) {
      maxIndex = i;
      max = totals[i];
    }
  }
  return props[maxIndex];
}


// I want to run some code after both the width and height transition
  // are complete

  // Listening for transitionend events will fire on every transition 
  // that ends. So in this case, both width and height. Assume I don't 
  // know how many properties are being transitioned.
  $('.box').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(ev) {
     var lastProp = getMaxTransitionDuration(this);
     console.log(ev, lastProp, ev.originalEvent.propertyName);
     if (ev.originalEvent.propertyName == lastProp) { 
       alert('End of ' + lastProp);
     }
    
       
  });
  $('.box').addClass('animate');