JSFiddle - React, Tailwind, and code Playground

HTML

<div id="big-green-box"></div>
<button id="with-transition">Go huge with transition</button>
<br>
<button id="naive-no-transition">Try to go medium without transition - the naive way</button>
<br>
<button id="timeout-no-transition">Go small without transition - the timeout-based way</button>
<br>
<button id="working-no-transition">Go tiny without transition - the reflow-forcing way</button>

CSS

#big-green-box {
    height: 50px;
    width: 50px;
    background-color: green;
    
    -webkit-transition: 2s all;
    -moz-transition: 2s all;
    -o-transition: 2s all;
    -ms-transition: 2s all;
    transition: 2s all;
}

.notransition {
    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -o-transition: none !important; 
    -ms-transition: none !important; 
    transition: none !important; 
}

JavaScript

$box = jQuery('#big-green-box');

jQuery('#with-transition').click(function () {
    $box.height(150);
});

jQuery('#naive-no-transition').click(function () { // This will fail in all modern browsers
    $box.addClass('notransition');
    $box.height(100);
    $box.removeClass('notransition');
});

jQuery('#timeout-no-transition').click(function () { // This will randomly fail in Firefox on slow PCs, and
                                                     // perhaps in some other contexts too.
    $box.addClass('notransition');
    $box.height(50);
    setTimeout(function () {
        $box.removeClass('notransition');
    }, 1);
});

jQuery('#working-no-transition').click(function () { // This works
    $box.addClass('notransition');
    $box.height(5);
    $box[0].offsetHeight;
    $box.removeClass('notransition');
});