Resizing Two Divs at Once

Question

So basically, I've got a bottom div and a top div inside a container. I need the bottom div to be adjustable, and the top div to kind of follow it around and occupy the empty space. I made a simple jQuery script, but it behaves very erratically and seems to exponentially expand everything.

Here's my code:

var lol = $("#lol").height();
var message = $("#text").height();
$("#message").height(lol - message);

$("#text").resizable({
  handles: 'n',
  resize: function() {
    var lol = $("#lol").height();
    var message = $("#text").height();

    $("#message").height(lol - message);
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>

Answer 1

When you resize text it moves the top of the div. You can reset the top to 0 to stop it from moving.

Here are 2 solutions:

var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());

$text.resizable({
  handles: 'n',
  resize: function(event, ui) {
    $message.height(lolHeight - ui.size.height);
    ui.position.top = 0;
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>

Or

var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());

$message.resizable({
  handles: 's',
  resize: function(event, ui) {
    $text.height(lolHeight - ui.size.height);
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>