JSFiddle - React, Tailwind, and code Playground

HTML

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="header" class="header">
        <div id="gobox" class="gobox">
            <center>
                <form id="form1">
                    <input type="submit" value="LEFT" />
                    <input type="text" name="website_url" value="http://pitchfork.com" size="30" />
                </form>
            </center>
        </div>
        <div id="gobox" class="gobox">
            <center>
                <form id="form2">
                    <input type="text" name="website_url" value="http://linotype.com/" size="30"/>
                    <input type="submit" value="RIGHT" />
                </form>
            </center>
        </div>
    </div>
    <iframe src="http://www.pitchfork.com" id="frame1">THIS WEBSITE DOES NOT SUPPORT 2 SCREENZ - TRY A DIFFERENT ONE!</iframe>
    <iframe src="http://www.linotype.com" id="frame2">THIS WEBSITE DOES NOT SUPPORT 2 SCREENZ - TRY A DIFFERENT ONE!</iframe>
</body>

CSS

form {
    display: block;
    float: left;
    width: 50%;
}
iframe {
    box-sizing: border-box;
    display: block;
    float: left;
    width: 50%;
    height:100%;
}
.header {
    width:100%;
    height:30px;
    background-color:#000;
    background-image:url(http://www.2screenz.com/images/2ScreenzHeader.jpg);
    background-image:url(http://www.2screenz.com/images/2ScreenzHeader---TEXT.jpg);
    background-repeat:no-repeat;
    background-position:center;
}

JavaScript

$('form#form1').on('submit', {
    'iframe_selector': '#frame1'
}, updateIframes);

$('form#form2').on('submit', {
    'iframe_selector': '#frame2'
}, updateIframes);


function updateIframes(event) {
    event.preventDefault();

    console.log('data', event.data);

    console.log('website_url value', this.website_url.value);


    $(event.data.iframe_selector).attr('src', this.website_url.value);

}