Ao redimencionar uma div
alterar o tamanho da outra para que assim se mantenham fixas.
Exemplo, ao redimensionar para baixo aumentar o tamanho da div
vermelha e diminuir a da verde e ao redimensionar para cima diminuir a vermelha e aumentar a verde
$("#div1").resizable({
handles: "s",
});
*{box-sizing:border-box}
.container {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
textarea {
text-align:center;
width:100%;
height:100%;
margin:0;
padding-top:30px;
background:red;
color:#fff;
resize:none;
overflow:hidden;
}
#div1 {
width:100%;
height:50%;
padding-bottom:15px;
}
#div2 {
background:green;
border:1px solid #000;
width:100%;
height:50%;
padding:5px;
}
.ui-resizable-s {
width:100%;
height:6px;
background:#e3e3e3;
border:1px solid #bbb;
cursor:ns-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="div1"><textarea>USE A BARRA CINZA PARA REDIMENSIONAR</textarea></div>
<div id="div2"></div>
</div>