JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Transition A -- overflow: visible (smooth transition)</h3>
<div id="a" class="outer">
    <div class="inner"></div>
</div>

<h3>Transition B -- overflow: hidden (transition does not occur in Firefox)</h3>
<div id="b" class="outer">
    <div class="inner"></div>
</div>

<p>The two red boxes should move the same way. <code>overflow:auto</code> has the same bug.</p>
<button class="go">Go</button>

CSS

.outer {
    background: gray;
    padding: 20px;
    margin: 5px;
}
.inner {
    background: red;
    position:relative;
    height: 50px;
    width: 50px;
    left: 0px;
    transition: left 1s;
}
.active-hidden {
    overflow: hidden; /* Set this to 'visible' and transition works */
}
.active .inner,
.active-hidden .inner {
    left: 100px;
}

JavaScript

$('.go').click(function () {
    $('#a').toggleClass('active');
    setTimeout(function () {
        $('#a').toggleClass('active');
    }, 2000);

    $('#b').toggleClass('active-hidden');
    setTimeout(function () {
        $('#b').toggleClass('active-hidden');
    }, 2000);
}).click();