title: Make divs right below each other
body: <p>I am trying to make it so that if I copy and paste a div, the pasted div appears right under the one I copied. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.friend {
    position: relative;
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="friend" href="#1"&gt;
    &lt;div class="user-status" id="friend-status"&gt;&lt;/div&gt;
    &lt;img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"&gt;
    &lt;h5 id="friend-name"&gt;Jane Doe&lt;/h5&gt;
  &lt;/a&gt;
  &lt;a class="friend" href="#2"&gt;
    &lt;div class="user-status" id="friend-status"&gt;&lt;/div&gt;
    &lt;img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"&gt;
    &lt;h5 id="friend-name"&gt;Jane Doe&lt;/h5&gt;
  &lt;/a&gt;
  &lt;a class="friend" href="#3"&gt;
    &lt;div class="user-status" id="friend-status"&gt;&lt;/div&gt;
    &lt;img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"&gt;
    &lt;h5 id="friend-name"&gt;Jane Doe&lt;/h5&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what it looks like now:</p>
  
  <p><a href="https://i.stack.imgur.com/4wVw6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4wVw6.png" alt="enter image dhere"></a></p>
  
  <p>I am trying to make the spacing between the .friend divs smaller so that they are closer together vertically. They must have the same class.</p>