title: how to get the divs to allign horizontally?
body: <p>So my problem right now is I want a bunch of text to align to the right of a certain picture <a href="https://i.stack.imgur.com/13Agr.png" rel="nofollow noreferrer">reference</a> is there a way to do that?
  I also want to do the same with another object but  on the other side of the image...</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>.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
  }
  
  .container {
    display: flex;
    justify-content: center;
  }
  
  .make-it-fit {
    max-width: 99%;
    max-height: 99%;
  }
  
  body {
    background-color: #EDF2EC;
  }
  
  fieldset {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
  }
  
  legend {
    color: blue;
    font-weight: bold;
    font-size: 85%;
    margin-bottom: .5em;
  }
  
  label {
    float: left;
    width: 90px;
  }
  
  input,
  select {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: .5em;
  }
  
  input {
    width: 14em;
  }
  
  input[type="radio"],
  input[type="checkbox"] {
    width: 1em;
    padding-left: 0;
    margin-right: 0.5em;
  }
  
  a {
    text-decoration: none
  }
  
  @font-face {
    font-family: 'Poppins', sans-serif;
    font-family: 'Josefin Slab', serif;
  }
  
  
  /*other scripts*/
  
  .first:hover {
    background-color: lightblue;
  }
  
  .second:hover {
    background-color: lavenderblush;
  }
  
  .third:hover {
    background-color: lemonchiffon;
  }
  
  .fourth:hover {
    background-color: gold;
  }
  
  .back:hover {
    background-color: peachpuff;
  }
  
  .socials {
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* For IE8 and earlier */
  }
  
  .socials:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='fill-screen' style="overflow: auto; max-height: 100vh;"&gt;
  
    &lt;div&gt;
      &lt;center&gt;
        &lt;font size="0.5" face="Poppins" color="4f6479"&gt;
          &lt;u&gt;
  
                          &lt;/u&gt;
        &lt;/font&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div&gt;
          &lt;img src='http://placehold.it/450x450' height="450"&gt;
        &lt;/div&gt;
        &lt;br&gt;
  
        &lt;div&gt;
          &lt;!--choices div--&gt;
          &lt;p align="right"&gt;
            &lt;a href="page2.html"&gt;
              &lt;p align="right"&gt;
                &lt;font size="2" face="Josefin Slab" color="4f6479" class="first"&gt;
                  &lt;i&gt;
                                          LEARN ABOUT THE CAUSE
                                      &lt;/i&gt;
                &lt;/font&gt;
              &lt;/p&gt;
            &lt;/a&gt;
            &lt;!----&gt;
            &lt;a href="page3.html"&gt;
              &lt;p align="right"&gt;
                &lt;font size="2" face="Josefin Slab" color="4f6479" class="second"&gt;
                  &lt;i&gt;
                                          GET CREATIVE
                                      &lt;/i&gt;
                &lt;/font&gt;
              &lt;/p&gt;
            &lt;/a&gt;
            &lt;!----&gt;
            &lt;a href="page4.html"&gt;
              &lt;p align="right"&gt;
                &lt;font size="2" face="Josefin Slab" color="4f6479" class="third"&gt;
                  &lt;i&gt;
                                          TAKE THE PLEDGE
                                      &lt;/i&gt;
                &lt;/font&gt;
              &lt;/p&gt;
            &lt;/a&gt;
            &lt;!----&gt;
            &lt;a href="page5.html"&gt;
              &lt;p align="right"&gt;
                &lt;font size="2" face="Josefin Slab" color="4f6479" class="fourth"&gt;
                  &lt;i&gt;
                                          SIGN UP FOR A NEWSLETTER
                                      &lt;/i&gt;
                &lt;/font&gt;
              &lt;/p&gt;
            &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/center&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div class='socials'&gt;
      &lt;!--social media div--&gt;
      &lt;a href="https://www.facebook.com/greenpeaceusa/"&gt;
        &lt;img src="http://placehold.it/32x32" img class="socials" alt="Facebook" height="32" /&gt;
      &lt;/a&gt;
      &lt;a href="https://twitter.com/Greenpeace"&gt;
        &lt;img src="http://placehold.it/32x32" img class="socials" alt="Twitter" height="30" /&gt;
      &lt;/a&gt;
      &lt;a href="https://www.youtube.com/user/GreenpeaceVideo"&gt;
        &lt;img src="http://placehold.it/32x32" img class="socials" alt="Youtube" height="30" /&gt;
      &lt;/a&gt;
      &lt;a href="http://sos-bees.org/"&gt;
        &lt;img src="http://placehold.it/32x32" alt="Greenpeace" img class="socials" height="30" /&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>