title: place an image and text side by side inside div
body: <p>I want to place an image and some text describing it.
  This should be responsive, i.e. img and text should be side-by-side in large screen and top-bottom on smaller screen. 
  So, basically, before you tag, its exactly same as <a href="https://stackoverflow.com/questions/14436800/two-divs-next-to-each-other-that-then-stack-with-responsive-change">Two Divs next to each other, that then stack with responsive change</a></p>
  
  <p>But this is not working.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;title&gt;Hello&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="groupi"&gt;
    &lt;div id="one"&gt;
      &lt;img src="hello.jpg" style="width:10vw"/&gt;  &lt;/div&gt;
    &lt;div id="two"&gt;Hello World&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
  }
  body {
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
  }
  .groupi { 
    border : 2px solid #000; 
    overflow:hidden;
  }
  .gruopi div {
     min-height: 200px;
     padding: 10px;
  }
  #one {
    float: left;
    padding-top:4vw; 
    margin-left:3vw; 
    margin-right: 1vw; 
    margin-bottom: 5vw; 
    width: 10vw;
    border-right:2px solid #000;
  }
  #two { 
    background-color: black;
    overflow:hidden;
    margin:1vw;
    border:2vw dashed #ccc;
    min-height:2vw;
  }
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    #two{
    }
  }
  </code></pre>
  
  <p>I am very new, and some help will be deeply appreciated.</p>