JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body style="margin:0;padding:0;">
        <iframe name="frame_left" id="frame_left" class="pane"
        frameborder="0" title="Frame Left" 
        src="http://www.google.com"></iframe>
        
        <div id="resizer" class="pane"></div>
        
        <iframe name="frame_right" id="frame_right" class="pane"
        frameborder="0"  title="Frame Right"
        src="http://www.cnn.com"></iframe>
    </body>
</html>

CSS

body { margin:0; padding:0; }
#resizer { background: black; width: 10px; cursor: col-resize; }
.pane { position: absolute; top: 0; }

JavaScript

$(document).ready(function() {
    // Size everything.
    var width = $(document).width(),
        height = $(document).height(),
        l1 = Math.floor(width/2) - $('#resizer').width();
    
    $('#frame_left').css({
        height: height + 'px',
        left: 0,
        width: l1 + 'px',
    });
    $('#resizer').css({
        left: l1 + 'px',
        height: height + 'px'
    });
    $('#frame_right').css({
        height: height + 'px',
        width: l1 + 'px',
        left: l1 + $('#resizer').width()
    });
    
    /**
     * Change the distance to 0 to see the desired effect (the clone
     * should fly off and be created immediately)
     */
    $('#resizer').draggable({
        axis: 'x',
        delay: 0,
        iframeFix: true,
        distance: 10,
        helper: 'clone',
        addClasses: false,
        zIndex: 100,
        cursor: 'col-resize',
        start: function(e, ui) {
         console.log('draggin started');   
        }
    });
});