JSFiddle - React, Tailwind, and code Playground

HTML

Hover (you should see green smoothly grow, to almost -- but not entirely -- fill the box):
<div id="parent">
    <div id="child">
    </div>
</div>

CSS

#parent {
    display: flex;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
#child {
    background-color: green;
    flex-grow: 0;
    transition: flex-grow 1s;
}
#parent:hover > #child {
    flex-grow: 0.8;
}