JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<html>
    <body style="margin:0;padding:0;">
        <iframe name="frame_left" id="frame_left"
        frameborder="0" title="Frame Left" 
        src="http://www.google.com"></iframe>
        
        <iframe name="frame_right" id="frame_right"
        frameborder="0"  title="Frame Right"
        src="http://www.cnn.com"></iframe>
    </body>
</html>

CSS

#frame_left-resizer {
 background:black;
}

JavaScript

$(document).ready(function() {
    $(document.body).layout({
        west: {
            paneSelector: '#frame_left',
            size: '50%',
            resizable: true
        },
        center: {
            paneSelector: '#frame_right'
        }
    });
});