align two divs side by side with floating (responsive) - html

Question

how can I make this container responsive so the text and the img automatically become block elements. I tried it out with flex direction but for someway it doesnt work. Can someone correct my code if necessary and suggest me a media query rule for the responsive design
<div class="top">
<h1>Welcome</h1>
<div class="portrait">
<img src="https://pixy.org/images/placeholder.png" alt="">
<h2>XXXXXXXXXX</h2>
</div>
</div>
.top h1{
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: black;
height: 20vw;
margin-top: 0;
font-size: 5vw;
color: white;
text-shadow: 5px 5px rgb(142, 135, 136);
}
.top img {
width: 20vw;
}
thanks in advance

Answer 1

I think this is what you are after. display: flex; is very powerful property and useful when it comes to take up rest of the space and centering.
Modification
here is a demo, I would not suggest this approach with using max-width as it's not "mobile-first". But if this is what you want for this project then ok.
.container {
display: flex;
flex-direction: row;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
min-height: 100px;
}
#media screen and (max-width: 700px) {
.container {
flex-direction: column;
}
#img {
width: 100%;
height: auto;
}
}
.container {
display: flex;
background-color: deepskyblue;
}
#img {
width: 140px;
height: 140px;
}
#text {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background-color: deeppink;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" />
<div id="text">text on the left, next to the img</div>
</div>

Answer 2

Ok, well so here it is if I understood well what you are trying to accomplish. Correct me or update your question if I am wrong!
#img{
width: 200px;
height: 150px;
float: left;
}
#text{
overflow: hidden;
}
<div class="container">
<img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
<div id="text">text on the left, next to the img</div>
</div>