JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar"></div>
<ul>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
    <li> li </li>
</ul>

CSS

div, ul { float: left; }
div { width: 20px; height: 20px; background: #f00; }

ul { padding: 0; margin: 0; }

JavaScript

$("ul").mouseenter(function() {
    $("#bar").animate({ 
        height: $("ul").height() 
    });
}).mouseleave( function() { 
    $("#bar").animate({
        height: 20
    });
});