JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="wrapper">
  <p class="mes1">緑をリサイズすると上に浮いてしまうが、下に固定したままにしたい。</p>
  <div id="draggable-dealie">
    <p class="mes2">つまりこの赤いエリアは見えてほしくない</p>
    <div id="resizable-dealie">
    </div>
  </div>
</div>

CSS

/* エリア */
.wrapper {
    position: fixed;
    overflow-y: scroll;
    background: khaki;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* リサイズ */
#draggable-dealie {
    position:fixed !important;
    background: red;
    width:100%;
    min-height: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}
#resizable-dealie {
    min-height:100px;
    bottom: 0;
    width:100%;
    background:green;
}


/* つまみ */
.ui-resizable-handle.ui-resizable-n {
    height: 15px;
    background: lime;
}


/* 説明 */
p.mes1 {
    margin: -100px 20px 100px 20px;
}
p.mes2 {
    position: absolute;
    bottom: 0;
    text-align: center;
    color: white;
    font-weight: bold;
    width: 100%;
}

JavaScript

//$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable({
     minHeight:100,
     maxHeight:200,
     handles: 'n'
});