JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="id_div_top_row">
	<iframe id="id_iframe_top" frameborder="0" src="">
	</iframe>
</div>

<div id="id_div_middle_row">
	<iframe id="id_iframe_middle_left" frameborder="0" src="">
	</iframe>
	<iframe id="id_iframe_middle_right" frameborder="0" src="">
	</iframe>
</div>

</body>

CSS

html {
	background: Green;
	height: 100%;
}

body {
	background: White;
	position: absolute; 
	top: 0; 
	bottom: 0; 
	right: 0; 
	left: 0;
}

iframe {
	box-sizing: border-box;
}
#id_div_top_row {
    height:80%;
}
#id_iframe_top {
	background-color: Red;
    height:100%;
	width: 100%;
}

#id_iframe_middle_left, #id_iframe_middle_right {
    float: left;
}

#id_iframe_middle_left {
    background-color: Pink;
    width: 30%;
}

#id_iframe_middle_right {
    background-color: Yellow;
    width: 70%;
}