Vertically Draggable Division of Two Areas

Question

I want to make a vertically draggable division of two areas like the following.

I just want to modify a online example of draggable divs to be what I want. Finally, I got this. Can someone give me some hints to modify it?

---

JSFiddle Link : https://jsfiddle.net/casperhongkong/omekvtka/14/

---

HTML

<div class="container">
  <div class="area1">
Area 1
  </div>
  <div class="drag">

  </div>
  <div class="area2">
Area 2
  </div>
</div>

---

CSS

.container {
  position: fixed;
  top: 51px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #272822;
  border: 1px solid #222;
 // margin: 0 auto;
  //display: inline-block;
}

.area1 {
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

.drag {
  position: fixed;

  width: 5px;
  height: 100%;
  background-color: #444;
  display: inline-block;
}

.area2 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 30%;
  background-color: #ddd;
  display: inline-block;
}

---

JavaScript

$(document).ready(function() {

  $('.drag').on('mousedown', function(e) {
    var $area1 = $('.area1'),
        $area2 = $('.area2'),
        startWidth_a1 = $area1.width(),
        startWidth_a2 = $area2.width(),
        pX = e.pageX;

    $(document).on('mouseup', function(e) {
      $(document).off('mouseup').off('mousemove');
    });

    $(document).on('mousemove', function(me) {
      var mx = (me.pageX - pX);
      $area1.css({
        width: startWidth_a1 - mx;
      });
      $area2.css({
        //left: mx / 2,
        width: startWidth_a2 - mx,
        //top: my
      });
    });

  });
});

Answer 1

For javascript, I would recommend checking out a library, as this is slitghtly more complicated than just a few lines. @fauxserious gave Split.js as a fantastic example.

This is possible in pure HTML/CSS, though slightly limited, as discussed here.

HTML:

<div class="split-view">
    <div class="resize-x panel" style="width: 216px;">
      Panel A
    </div>
    <div class="panel">
      Panel B
    </div>
</div>

CSS:

/* Panels: */
.panel{ 
    padding: 1em; 
    border-width: 6px; 
    border-style: solid; 
    height: 4em; 
}

/* Resizing */
.resize-x { 
    resize: horizontal;
    overflow: auto;
}

/* Split View */
.split-view {
    margin: 1em 0; 
    width: 100%;
    clear: both;
    display: table;
}

.split-view .panel {
    display: table-cell;
}