javascript - ドラッグ可能なイベントを使用して、横に並べて表示される div の幅を広げます

Question

現在、固定長の 2 つの div があります。これは、iframe を動的に埋め込んで外部 URL をロードします。Div が隣り合って表示されます - 1 つは左に、もう 1 つは右に表示されます。

今のところ、それぞれの幅を固定して50%います。しかし、ユーザーが任意の div の幅を広げて内部の URL を簡単に表示できるようにしたいと考えていますwithout scrolling horizontally。必要に応じて、2 つの div を区切る境界線を左または右にドラッグするようなものです。

これを達成する方法はありますか？ライブラリか何かを提案してください。

画像に使用されるライブラリtwentytwentyを調べました。それが動的 iframe でどのように機能するかはわかりません。

divを表示するJSFiddleを次に示します。

<div>
    <div id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div id="diffReport" style="width:45%; height: 730px;float:right">
        <p>another div</p>
    </div>
</div>