Resize two divs at once with jquery-ui

$(".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><divclass="vertical">
  <div class="topo">
    topo
  </div>
  <div class="divisor-horizontal">
  </div>
  <div class="base">
    base
  </div>
</div>

 $(".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><divclass="horizontal">
  <div class="esquerda">
    Esquerda
  </div>
  <div class="divisor">
  </div>
  <div class="direita">
    Direita
  </div>
</div>

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