JSFiddle - React, Tailwind, and code Playground

HTML

<header id="head">
    <h1>My Research Assistant</h1>
</header>
<div id="container">
    <div id="wrap">
        <iframe id="web" src="iframe.html" width="100%" scrolling="no" ></iframe>
    </div>
    <div id="page"></div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}

body > header {
    background: #eee;
    border-bottom: 1px solid #333;
    height: 0px;
    overflow: hidden;
    position: absolute; 
    width: 100%;
    z-index: 10;
}

h1 {
    margin: 0;
    padding: 15px 20px;
}

#container {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #00f;
}
#wrap { 
    position: absolute;
    top:0;
    left:0;
    right:200px;
    bottom:0;
    background: #0f0;
}
#web {
    border: 0;
    bottom: 0;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    left: 0;
    z-index:0;
}

#page {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
    background: red;
    z-index: 0;
}