How to align Google Maps Iframe and a box? - html

Question

I want to align the Google Maps box and the text bow in the same line, but I can't.
I've already tried with position: relative and changed the top and left sizes, but despite they were aligned, a huge blank space took place on the bottom.
.ind-mapa {
position: relative;
overflow: hidden;
padding-top: 56.25%;
z-index: 1;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;
}
.ind-media {
float: left;
border: 0.5px #f6e8d5 solid;
overflow: auto;
margin-left: 50vw;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #cccccc;
z-index: 1;
}
<div class="ind-contato">
<div class="ind-mapa" style="display: inline-block;">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" style="border-radius: 10px; border: 0.5px #f6e8d5 solid; box-shadow: 3px 3px 5px 3px #cccccc;" align="left" allowfullscreen></iframe>
<div class="ind-media" style="display: inline-block;">
</div>
</div>

Answer 1

Flex layout does the trick:
.ind-mapa {
position: relative;
display: flex;
}
.ind-mapa>* {
flex: 0 1 auto;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #ccc;
z-index: 1;
}
.resp-iframe {
flex: 0 0 auto;
margin-right: 20px;
}
<div class="ind-mapa">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" allowfullscreen></iframe>
<div class="ind-media">
I want to align the Google Maps box and the text bow in the same line, but I can't. I've already tried with position: relative and changed the top and left sizes, but despite they were aligned, a huge blank space took place on the bottom.
</div>
</div>

Answer 2

CSS Flexbox will do the job, see: https://www.w3schools.com/css/css3_flexbox.asp and https://css-tricks.com/snippets/css/a-guide-to-flexbox/
See snippet with a minimal working sample.
Also you did not close the div's properly.
I've already tried with position: relative and changed the top and
left sizes, but despite they were aligned, a huge blank space took
place on the bottom.
On your code, the MAP is not getting the full height because you positioned the iframe as position: absolute; and did not set the height, so if you set .resp-iframe with height: 100%; the iframe will be at the same height as it's parent.
Viva Mooca bella!
.ind-contato {
display: flex;
}
.ind-contato > div,
.ind-contato > iframe {
flex: 0 0 50%;
box-shadow: 3px 3px 5px 3px #ccc;
border-radius: 10px;
box-shadow: 3px 3px 5px 3px #ccc;
}
<div class="ind-contato">
<iframe class="resp-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6150.579385265073!2d-46.595158112257735!3d-23.56282631464785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5eb2bb2e0fd7%3A0x598f639056140b1f!2sR.+do+Orat%C3%B3rio%2C+1036+-+Mooca%2C+S%C3%A3o+Paulo+-+SP%2C+03118-030!5e0!3m2!1spt-BR!2sbr!4v1548656882243"
frameborder="0" allowfullscreen></iframe>
<div class="ind-media">
Box on the side.
</div>
</div>