JSFiddle - React, Tailwind, and code Playground

HTML

<p>Without paddings, grows correct:</p>
<div class="wrap"><div class="test" id="correct"></div></div>
<p>With paddings, grows incorrect:</p>
<div class="wrap"><div class="test" id="incorrect"></div></div>

CSS

.wrap {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}

#incorrect {
    background: red;
    height: 100px;
    padding: 50px;
    width: 100px;
}

#correct {
    background: red;
    height: 200px;
    width: 200px;
}

JavaScript

$('.test').hide().show('scale', { origin: ['bottom', 'left'] }, 5000);