JSFiddle - React, Tailwind, and code Playground

HTML

<div id="library">
    <ul>
        <li id="add-button-button" class="library-item">Button</li>
        <li id="add-text-button" class="library-item">Text</li>
        <li id="add-image-button" class="library-item">Image</li>
        <li id="add-map-button" class="library-item">Map</li>
        <li id="add-textinput-button" class="library-item">Input</li>
        <li id="add-gpsIndicator-button" class="library-item">GPS</li>
    </ul>
</div>

<button id="press">Press me to shrink the list</button>

CSS

#library {
    width: 150px;
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

#library li.library-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid black;
    width: 50%;
    height: 20px;
    float: left;
    text-align: center;
}

JavaScript

$("#press").click(function() { 
    $("#library").css("height", "50px");
} );