JSFiddle - React, Tailwind, and code Playground

HTML

<div class="positionads">
			<div class="divisao">
                    <img src="http://e-confiavel.com/images/econfiavel.png" alt="Logo É CONFIÁVEL?">
                    <button class="btn">Aguarde 5 segundos</button>
			</div><!-- FIM DIVISÃO -->
        </div><!-- FIM NOME-DIV -->
        
        <div class="iframeads">
			<div class="divisao">
                <iframe src="https://tableless.com.br" style="border:none;"  scrolling="yes"></iframe>
			</div><!-- FIM DIVISÃO -->
        </div><!-- FIM NOME-DIV -->
        
        <div class="loader">
			<div class="divisao">
                <h2>LOADER</h2>
			</div><!-- FIM DIVISÃO -->
        </div><!-- FIM NOME-DIV -->
        
        <div class="footer">
			<div class="divisao">
                <h2>FOOTER</h2>
			</div><!-- FIM DIVISÃO -->
        </div><!-- FIM NOME-DIV -->

CSS

*, body {
    padding: 0;
    margin: 0 auto;
    font-family: sans-serif;
    position: relative;
    clear: both;
    overflow: auto;
}
iframe {
    position: relative;
    width: 100%;
}
.divisao{
    position: relative;
    width: 100%;
}
.positionads{
    background-color: #008e00;
    height: 100%;
}
.loader {
    background-color: #ffff00;
}
.footer{
    background-color: #ff0000;
}
.positionads img {
    max-width: 100%;
    max-height: 60px;
    padding: 0.25em;
}
.btn {
    background: none;
    cursor: pointer;
    position: relative;
    float: right;
    padding: 1em;
    margin: 1em;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
}
.btn:hover {
    background: #fff;
    cursor: pointer;
    position: relative;
    float: right;
    padding: 1em;
    margin: 1em;
    color: #252525;
    border: 1px solid #fff;
    border-radius: 5px;
}
@media screen and (max-width: 450px) {
	.positionads img {
        float: left;
    }
    .btn, .btn:hover {
        position: relative;
		float: left;
        left: 48px;
	}
}