I have two divs of fixed length as of now, which loads external URL by dynamically embedding iframes inside them. Divs are appearing next to each other - one on left and other right.

As of now, I have fixed their width to 50% each. But, I want to give user a flexibility to increase the width of any div to view the URL inside easily without scrolling horizontally. Something like dragging the border separating the two divs to either left or right according to his need.

Is there a way I could achieve this? Please suggest any library or something.

I have gone through a library twentytwenty which is used for images. I don't know how will that work for dynamic iframes.

Here is the JSFiddle which displays the divs.

<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>