如何在HTML,JavaScript和CSS,Result之间复制jsfiddle水平拖动条

Question

Jsfiddle有一个功能,允许用户调整HTML,Javascript,CSS和Result的窗口大小.我试图在我的网站上实现类似的功能,包括文章和评论.水平拖动注释栏以放大注释部分,或放大文章.

我实际上在jsfiddle中有一个有点工作的拖动条(这是大大简化):

http://jsfiddle.net/Gp5as/2/

问题是,蓝色注释部分被25px覆盖,因此当栏向右拖动时,注释部分是不对称的.

有两个主要部分:

<div class="main">
  ...
</div>

和

<div id="sidebar">
  <span id="position"></span>
  <div id="dragbar"><div id="dragtext">Comments</div></div>
  <div id="comment-container">
    <div id="comment">
      Comments
    </div>
  </div>
</div>

主要是文章,侧边栏是评论.拖杆位于侧边栏浮动内部:左侧.

我想知道如何为我自己的目的实现他们的拖动功能.您可以修改我的jsfiddle示例,或创建一个易于剪切和粘贴的jsfiddle示例.