Resize two Divs at the same time with jquery-ui

Question

By redeeming a div change the size of the other so that they remain fixed.
Example, when resizing down increase the size of the div red and decrease the green and when resizing up decrease the red and increase the green

$("#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>

Answer 1

Edited with the AP context

I found a related question in the O.R., this here.

$("#div1").resizable();
$('#div1').resize(function(){
    $('#div2').height($(".container").height()-$("#div1").height()); 
});

*{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>

Answer 2

You can use flexbox to maintain the div fixed without having to do so in the script, the examples below use a div as control to resize, only the first div is resized by script, to div follow automatically, as determined in flex

In the same column:

$(".topo").resizable({ //determina a div que será redimensionada
   handleSelector: ".divisor-horizontal", //determina a div que servirá de controle
   resizeWidth: false //desabilita o redimensionamento horizontal
 });

.vertical {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid silver;
  overflow: hidden;
}

.topo {
  flex: 0 0 auto;
  padding: 10px;
  height: 100px;
  width: 100%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.divisor-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background:#535353;
  cursor: row-resize;
}

.base {
  flex: 1 1 auto;
  padding: 10px;
  min-height: 200px;
  background: #eee;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<div class="vertical">
  <div class="topo">
    topo
  </div>
  <div class="divisor-horizontal">
  </div>
  <div class="base">
    base
  </div>
</div>

In the same vein:

 $(".esquerda").resizable({ //determina a div que será redimensionada
   handleSelector: ".divisor", //determina a div que servirá de controle
   resizeHeight: false //desabilita o redimensionamento vertical
 });

.horizontal {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
}

.esquerda {
  flex: 0 0 auto;
  padding: 10px;
  width: 200px;
  min-height: 200px;
  min-width: 100px;
  max-width:80%;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.divisor {
  flex: 0 0 auto;
  width: 18px;  
  background:#535353;
  min-height: 200px;
  cursor: col-resize;  
}

.direita {
  flex: 1 1 auto;
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<div class="horizontal">
  <div class="esquerda">
    Esquerda
  </div>
  <div class="divisor">
  </div>
  <div class="direita">
    Direita
  </div>
</div>