JSFiddle - React, Tailwind, and code Playground

HTML

<div id="the_body">
    <div id="header">
        Some images, text, etc
    </div>
    <div id="other">
        other elements
    </div>
    <div id="frame-wrap">
        <div id="frame-header">
            more elements...
        </div>
        <iframe src="http://wordreference.com/" id="the-iframe">
        </iframe>
    </div>
</div>

CSS

#header {
    color: white;
    background-color: blue;
    min-height: 100px;
    display: block;
}

#other {
    background-color: yellow;
    min-height: 50px;
}

#frame-header {
    color: red;
    min-height: 50px;
}

#the-iframe {
    width: 100%;
    height: 100%;
}