JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><input type="checkbox"> 1</li>
    <li><input type="checkbox"> 2</li>
    <li><input type="checkbox"> 3</li>
    <li><input type="checkbox"> 4</li>
    <li><input type="checkbox"> 5</li>
    <li><input type="checkbox"> 6</li>
    <li><input type="checkbox"> 7</li>
    <li><input type="checkbox"> 8</li>
    <li><input type="checkbox"> 9</li>
    <li><input type="checkbox"> 10</li>
</ul>

CSS

ul {
    float : left;
    border : 1px solid #d9d9d9;
    margin : 0;
    padding : 6px 10px;
    list-style : none;
    overflow : auto;
    width : 208px;
    height : 125px;
}

JavaScript

$('ul').hover(function() {
    var height = $(this).css('height', 'auto').height(); // get real height
    $(this).css('height','125px'); // return current state;
    $(this).animate({height: height+'px'}, 400);
}, function() {
    $(this).animate({
        height: '125px'
    }, 400);
});