JSFiddle - React, Tailwind, and code Playground

by Angelo Morgan

HTML

<div id="containercontato">
        <div id="contatoendereco">
            <h1>Endereço</h1>
            <p>Av. Bernardino de Campos,</p>
            <p>98</p>        
            <p>São Paulo,</p>
            <p>SP 12345-678</p>
            <p>[email protected]</p>
            <div id="map-responsive">
                <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3728.5346981934304!2d-41.11321798469949!3d-20.850487786095172!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb942b79a95c33d%3A0x8f4c1261f8d0f08e!2sR.+Vinte+e+Cinco+de+Mar%C3%A7o%2C+373+-+Centro%2C+Cachoeiro+de+Itapemirim+-+ES%2C+29300-100!5e0!3m2!1spt-BR!2sbr!4v1490289308120" width="300" height="150" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </div>

CSS

#containercontato {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    #contatoendereco {
        display: flex;
        flex-flow: column;
        max-width: 600px;
        border: 1px solid;
    }

    #map-responsive {
        width: 100%;
        height: 100%;
        border: 1px solid black;
    }

    #map-responsive iframe {
        height: 100%;
        width: 100%;
    }