如何让divs水平对齐？

Question

所以我现在的问题是我想要一堆文字与某张图片的右侧对齐reference有没有办法做到这一点？ 我也想对另一个对象做同样的事情，但是在图像的另一边......

.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 */
}

<div class='fill-screen' style="overflow: auto; max-height: 100vh;">

  <div>
    <center>
      <font size="0.5" face="Poppins" color="4f6479">
        <u>

                        </u>
      </font>
      <br>
      <br>
      <div>
        <img src='http://placehold.it/450x450' height="450">
      </div>
      <br>

      <div>
        <!--choices div-->
        <p align="right">
          <a href="page2.html">
            <p align="right">
              <font size="2" face="Josefin Slab" color="4f6479" class="first">
                <i>
                                        LEARN ABOUT THE CAUSE
                                    </i>
              </font>
            </p>
          </a>
          <!---->
          <a href="page3.html">
            <p align="right">
              <font size="2" face="Josefin Slab" color="4f6479" class="second">
                <i>
                                        GET CREATIVE
                                    </i>
              </font>
            </p>
          </a>
          <!---->
          <a href="page4.html">
            <p align="right">
              <font size="2" face="Josefin Slab" color="4f6479" class="third">
                <i>
                                        TAKE THE PLEDGE
                                    </i>
              </font>
            </p>
          </a>
          <!---->
          <a href="page5.html">
            <p align="right">
              <font size="2" face="Josefin Slab" color="4f6479" class="fourth">
                <i>
                                        SIGN UP FOR A NEWSLETTER
                                    </i>
              </font>
            </p>
          </a>
      </div>

    </center>
    <br>
  </div>
  <div class='socials'>
    <!--social media div-->
    <a href="https://www.facebook.com/greenpeaceusa/">
      <img src="http://placehold.it/32x32" img class="socials" alt="Facebook" height="32" />
    </a>
    <a href="https://twitter.com/Greenpeace">
      <img src="http://placehold.it/32x32" img class="socials" alt="Twitter" height="30" />
    </a>
    <a href="https://www.youtube.com/user/GreenpeaceVideo">
      <img src="http://placehold.it/32x32" img class="socials" alt="Youtube" height="30" />
    </a>
    <a href="http://sos-bees.org/">
      <img src="http://placehold.it/32x32" alt="Greenpeace" img class="socials" height="30" />
    </a>
  </div>
</div>