JQuery-UI split pane

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="container">Container
  <div id="left_pane">Left pane</div>
  <div id="right_pane">Right pane</div>
</div>

CSS

* {
  box-sizing: border-box;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

#left_pane,
#right_pane {
  top: 0;
  height: 100%;
  position: absolute;
  padding: 10px;
  color: black;
}

#left_pane {
  width: 25%;
  left: 0;
  background: lightgrey;
  border-right: 2px solid black;
}

#right_pane {
  width: 75%;
  right: 0;
  background: white;
}

JavaScript

$("#left_pane").resizable({
  handles: 'e',
  resize: function() {
    $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
  }
});