Change div height using drag

Question

I have div named showfilteredhistory containing list elements and having height of 70px. I want to change height of this div according to drag of "cursor". I have tried to use resize property inside div but i want to change it according to "drag" id.

var isResizing = false,
        lastDownX = 0;

    $(function () {
        var container = $('#container'),
            top = $('#JobHistory'),
            filteredhistory = $('#showfilteredhistory'),
            bottom = $('#bottom-panel'),
            handle = $('#drag');

        handle.on('mousedown', function (e) {
            isResizing = true;
            lastDownX = e.clientY;
        });

        $(document).on('mousemove', function (e) {
            
            if (!isResizing)
                return;
            
            var offsetRight = container.height() - (e.clientY - container.offset().top);

            //top.css('height', offsetRight);
            filteredhistory.css('height', offsetRight);
            filteredhistory.css('max-height', offsetRight);
            filteredhistory.css('height', '');
            bottom.css('bottom', offsetRight);
        }).on('mouseup', function (e) {
            // stop resizing
            isResizing = false;
        });
    });

#container {
  width:100%;
  height:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
            
        <div class="row" style="margin-bottom: 15px; height:70px; overflow-y:auto; " id="showfilteredhistory">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
             <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
             <li>M</li>
            <li>N</li>
            <li>O</li>
            <li>P</li>
        </div>
               
            <div id="bottom-panel">
                <div id="drag" style="cursor:n-resize; text-align:center;">===========</div>
            </div>
        </div>