javascript - 如何添加左右div中间动态调整的分割线功能？

Question

现在有2个p

<p id="content">
    <p id="left">
    <p id="right">
</p>

我想在left和right之间添加一条分割线，可以左右拖动，动态改变两边p的宽度，两个p宽度加起来始终是填充满父元素的宽度。
目前只找到Jquery ui 的resizable组件，我是给left-p添加了很小的一个margin-right用作看起来粗点的分割线，然后设置left的e可拖动，调整宽度的时候重新计算两边p的宽度，最后CSS设置。
这样有两个问题：

1.我左右拉动分割线的时候，速度稍微快点，这个分割线会变的很粗，效果非常差
2.改变左右p的宽度是通过resize事件来控制，动态计算宽度，然后用css()设置的，这样应该性能非常低吧。
请问，还有什么好的办法，或者改进的建议？

Answer 1

frame可以吗？

Answer 2

代码有点乱 可以自己整理一下 代码量不大
http://codepen.io/hj624608494...