Javascript 使用HR标记动态调整textarea的大小

是否有人有线索可以帮助我使用jquery动态调整带有hr标记的两个文本区域的大小？
基本上我有这样的想法：

<textarea id="input"></textarea>
<hr>
<textarea id="output"></textarea>

使用css将textarea设置为“resize:none”，如果我单击“hr行”，按住它并向上拖动，我希望输入textarea降低textarea的高度并增加输出textarea的高度。resize应仅适用于高度。
一个例子是JSFiddle：您可以抓取一行（比如说html和JS之间的一行）并调整这两个元素的大小（一个变大，一个变小）

检查 您有两个div而不是文本区域（就像JSFiddle使用的那样），但这是您问题的开始，不是吗

使用divs的HTML代码：

<div id="main">
    <div id="first">
        <div id="first-head">
             <h3>First</h3>
        </div>
        <div id="first-body">
            <p>First-1</p>
            <p>First-2</p>
            <p>First-3</p>
            <p>First-4</p>
            <p>First-5</p>
            <p>First-6</p>
        </div>
    </div>
    <div id='second'>
        <div id="second-head">
             <h3>Second</h3>
            <div class="ui-resizable-handle ui-resizable-s" id="ngrip"></div>
        </div>
        <div id="second-body">
            <p>Second-1</p>
            <p>Second-2</p>
            <p>Second-3</p>
            <p>Second-4</p>
            <p>Second-5</p>
            <p>Second-6</p>
            <p>Second-1</p>
            <p>Second-2</p>
            <p>Second-3</p>
            <p>Second-4</p>
            <p>Second-5</p>
            <p>Second-6</p>
        </div>
    </div>
</div>

弗斯特
一级-1

第一-2

第一-3

第一至第四名

一等五

第一至第六名

第二
二一

二等兵

二三

二四

二五

二六

二一

二等兵

二三

二四

二五

二六