JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="grows"></div>
</div><br><br><br><br>
<span id="width"></span>

CSS

div#parent {
    width: 100px;
    height: 100px;
}

div#grows {
    width: 100%;
    height: 100%;
    
    background-color: black;
    
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

div#grows:hover {
    width: 150%;
    height: 150%;
}

JavaScript

$(document).ready(function() {
    $('div#grows').hover(function() {
        $('#width').html($('#width').html() + ' ' + $(this).css('width'));
    });
});