Move the pointer to the grid line and drag it

left top content
right top content
left bottom content
right bottom content

Usage

HTML
<div class="box4 demo3">
  <div class="box4-box left top">left top content</div>
  <div class="box4-box right top">right top content</div>
  <div class="box4-box left bottom">left bottom content</div>
  <div class="box4-box right bottom">right bottom content</div>
</div>
        
CSS
h2 {
  color: #999;
}

.box4.demo3 {
  height: 100%;
}
        
JS
$(function(){
  
  // add this line to your JavaScript
  $('.box4').box4();

  // You can custom percentage numbers for vertical and horizontal grid size by fill v and h params. $('.box4').box4(v, h);
  // $('.box4').box4(20, 60);
  // 20 -> horizontal percentage
  // 60 -> vertical percentage
});
        
PREVIEW
left top content
right top content
left bottom content
right bottom content

Options

You can custom percentage numbers for vertical and horizontal grid size by v and h param. $('.box4').box4(v, h);

  $('.box4').box4(20, 60);