CodePen

HTML

            
              <div class="SplitWindow">
  <div class="LeftPane">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.</p>
  </div>
  <div class="Splitter"></div>
  <div class="RightPane">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p>
    <p>Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis facilisis massa. Etiam eu urna. Sed porta. Suspendisse quam leo, molestie sed, luctus quis, feugiat in, pede. Fusce tellus. Sed metus augue, convallis et, vehicula ut, pulvinar eu, ante. Integer orci tellus, tristique vitae, consequat nec, porta vel, lectus. Nulla sit amet diam. Duis non nunc. Nulla rhoncus dictum metus. Curabitur tristique mi condimentum orci. Phasellus pellentesque aliquam enim. Proin dui lectus, cursus eu, mattis laoreet, viverra sit amet, quam. Curabitur vel dolor ultrices ipsum dictum tristique. Praesent vitae lacus. Ut velit enim, vestibulum non, fermentum nec, hendrerit quis, leo. Pellentesque rutrum malesuada neque.</p>
    <p>Nunc tempus felis vitae urna. Vivamus porttitor, neque at volutpat rutrum, purus nisi eleifend libero, a tempus libero lectus feugiat felis. Morbi diam mauris, viverra in, gravida eu, mattis in, ante. Morbi eget arcu. Morbi porta, libero id ullamcorper nonummy, nibh ligula pulvinar metus, eget consectetuer augue nisi quis lacus. Ut ac mi quis lacus mollis aliquam. Curabitur iaculis tempus eros. Curabitur vel mi sit amet magna malesuada ultrices. Ut nisi erat, fermentum vel, congue id, euismod in, elit. Fusce ultricies, orci ac feugiat suscipit, leo massa sodales velit, et scelerisque mi tortor at ipsum. Proin orci odio, commodo ac, gravida non, tristique vel, tellus. Pellentesque nibh libero, ultricies eu, sagittis non, mollis sed, justo. Praesent metus ipsum, pulvinar pulvinar, porta id, fringilla at, est.</p>
    <p>Phasellus felis dolor, scelerisque a, tempus eget, lobortis id, libero. Donec scelerisque leo ac risus. Praesent sit amet est. In dictum, dolor eu dictum porttitor, enim felis viverra mi, eget luctus massa purus quis odio. Etiam nulla massa, pharetra facilisis, volutpat in, imperdiet sit amet, sem. Aliquam nec erat at purus cursus interdum. Vestibulum ligula augue, bibendum accumsan, vestibulum ut, commodo a, mi. Morbi ornare gravida elit. Integer congue, augue et malesuada iaculis, ipsum dui aliquet felis, at cursus magna nisl nec elit. Donec iaculis diam a nisi accumsan viverra. Duis sed tellus et tortor vestibulum gravida. Praesent elementum elit at tellus. Curabitur metus ipsum, luctus eu, malesuada ut, tincidunt sed, diam. Donec quis mi sed magna hendrerit accumsan. Suspendisse risus nibh, ultricies eu, volutpat non, condimentum hendrerit, augue. Etiam eleifend, metus vitae adipiscing semper, mauris ipsum iaculis elit, congue gravida elit mi egestas orci. Curabitur pede.</p>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .SplitWindow {
  width: 100%;
}

.SplitWindow div {
  height: 300px;
  overflow: auto;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.LeftPane {
  float: left;
  padding: 15px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  width: 200px;
  background-color: wheat;
  z-index: 5;
}

.RightPane {
  width: 50%;
  padding: 15px;
  float:left;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  background-color: lightblue;
  z-index: 5;
}

.Splitter {
  float: left;
  width: 8px;
  cursor: w-resize;
  background-color: red;
  z-index: 25;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var mouseIsDown = false;
var defaultWidth = 320;
var minLeft = 150;
var minRight = 250;

$().ready(function () {
  $('.LeftPane').css('width', defaultWidth);
  $('.RightPane').css('width', $('.SplitWindow').width() - (defaultWidth + $('.Splitter').width()));
  
  $(document).mousedown(function (e) {
    if ((!mouseIsDown) && $(e.target).hasClass('Splitter')) {
      mouseIsDown = true;
    }
  }).mousemove(function (e) {
    if (mouseIsDown) {
      var posX = e.pageX;
      var allWidth = $('.SplitWindow').width();
      var useX = (posX < minLeft) ? minLeft : (allWidth - posX < minRight) ? allWidth - minRight : posX;
      $('.LeftPane').css('width', useX - $('.Splitter').width() - 4).css('user-select', 'none');
      $('.RightPane').css('width', allWidth - (useX - 4)).css('user-select', 'none');
    }
  }).mouseup(function () {
    mouseIsDown = false;
    $('.LeftPane').css('user-select', 'text');
    $('.RightPane').css('user-select', 'text');
  }).click(function () {
    mouseIsDown = false;
    $('.LeftPane').css('user-select', 'text');
    $('.RightPane').css('user-select', 'text');
  }).dblclick(function (e) {
    mouseIsDown = false;
    var allWidth = $('.SplitWindow').width().css('user-select', 'text');
    $('.LeftPane').css('width', defaultWidth).css('user-select', 'text');
    $('.RightPane').css('width', allWidth - (defaultWidth + $('.Splitter').width()));
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................