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 = document.getElementById('big-green-box');

document.getElementById('with-transition').addEventListener('click', function () {
    box.style.height = '150px';
});

// This will fail in all modern browsers
document.getElementById('naive-no-transition').addEventListener('click', function () {
    box.classList.add('notransition');
    box.style.height = '100px';
    box.classList.remove('notransition');
});

// This will randomly fail in Firefox on slow PCs, and
// perhaps in some other contexts too.
document.getElementById('timeout-no-transition').addEventListener('click', function () { 
    box.classList.add('notransition');
    box.style.height = '50px';
    setTimeout(function () {
        box.classList.remove('notransition');
    }, 1);
});

// This works
document.getElementById('working-no-transition').addEventListener('click', function () { 
    box.classList.add('notransition');
    box.style.height = '5px';
    box[0].offsetHeight;
    box.classList.remove('notransition');
});