title: align two divs side by side with floating (responsive)
body: <p>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</p>
  
  <pre><code>&lt;div class="top"&gt;
      &lt;h1&gt;Welcome&lt;/h1&gt;
      &lt;div class="portrait"&gt;
         &lt;img src="https://pixy.org/images/placeholder.png" alt=""&gt;
         &lt;h2&gt;XXXXXXXXXX&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .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;
  }
  </code></pre>
  
  <p>thanks in advance</p>