jQuery resizeable. Позиционирование div

Есть задача вот такая задача:

Для изменения размера блоков решил использовать плагин jQueryUI - resizeable().

Попытался сделать вот так:

HTML:

<div id="ui-widget-content1" class="first-second-div">
    <div id="firstDiv" class="ui-widget-content"></div>
    <div id="secondDiv" class="ui-widget-content"></div>
</div>

<div id="ui-widget-content2" class="third-fourth-div">
    <div id="thirdDiv" class="ui-widget-content"></div>
    <div id="fourthDiv" class="ui-widget-content"></div>
</div>

CSS:

html {
        overflow: hidden;
    }

    html div {
        display: inline-block;
    }

    .ui-widget-content {
        width: 49%;
        height: 240px;
    }

    #firstDiv {
        background-color: #B5DDE9;
    }

    #secondDiv {
        background-color: #28B9B2;
    }

    #thirdDiv {
        background-color: #FFBDC7;
    }

    #fourthDiv {
        background-color: #FDA883;
    }

    .first-second-div div,
    .third-fourth-div div {
        display: inline-block;
    }

JS:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function() {
        $(".ui-widget-content").resizable({
            handles: 's',
            minHeight: 50
        });
    });
</script>

Но тут не правильно работает изменение: если тянуть блок с низу в верх, то он начинает уменьшаться с верху, а не с низу как надо.

Прошу помочь.