Footer with copyright and social media icons won't center vertically

Working on making my website. I'm sure this is an easy fix but I'm so stuck!

I am trying to vertically center the copyright info on the right, then the social icons on the left. But they appear to be stacked then aligned left and right.

Here's what that looks like

Please forgive the dumb question. Very new to all this, and I've done as much troubleshooting as I can. I'm hoping is a "duh" answer!

I have a footer in my index which reads like this:

 #main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;

  .footer_text {
    text-align: right;
    font-size: 17px;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px;
    a {
      align: left;

      &:hover {
        color: $secondary-color;
        @include easeOut;
      }
    }
  }
}

<footer id="main-footer">

  <div class="footer_text">Copyright &copy; 2018</div>

  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x"></i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x"></i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x"></i>
    </a>
  </div>

</footer>

Solution

I would recommend the following:

Readjust your HTML so that your .footer_text div comes after the .footer_icons div.
Add the following lines of CSS to your #main_footer div.

display: flex; align-items: center; justify-content: space-between;

See the code snippet below or this codepen:

#main-footer {
  padding: center;
  background: darken($primary-color, 10);
  color: set-text-colour($primary-color);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .footer_text {
    text-align: right;
    font-size: 17px;
  }

  .footer_icons {
    margin-left: 5%;
    text-align: center;
    display: block;
    width: 100px;
    padding: 4px;
    a {
      align: left;

      &:hover {
        color: $secondary-color;
        @include easeOut;
      }
    }
  }
}

 <footer id="main-footer">



  <div class="footer_icons">
    <a href="https://www.instagram.com/beellllaa/">
      <i class="fab fa-instagram fa-2x">IG</i>
    </a>
    <a href="https://www.linkedin.com/in/beellllaa/">
      <i class="fab fa-linkedin fa-2x">LI</i>
    </a>
    <a href="https://www.vimeo.com/beellllaa/">
      <i class="fab fa-vimeo fa-2x">VI</i>
    </a>
  </div>
   
   <div class="footer_text">Copyright &copy; 2018</div>

</footer>