Can't get divs to me on the same line within footer

Question

I'm making a footer for a site and I need it to have multiple sections and hence a div for each section. So far I've got too but they're not aligned with each other, as shown here:

Answer 1

footer {
   height: 300px;
   background-color: #EBEBEB;
   width: 100%;
}
div#footer-wrapper div{ /* add this section of code */
  vertical-align : top; /* vertical alignment */
}
footer ul li {
   font-family: 'Arsenal', sans-serif;
   font-weight: 600;
   font-size: 14px;
   list-style-type: none;
}
footer h1 {
   font-family: 'Arsenal', sans-serif;
   font-weight: 600;
   margin-bottom: 0px;
}
footer .footer-h1-wrapper {
   width: 220px;
   border-bottom: 4px solid #333;
}
footer #footer-wrapper {
   margin-left: 150px;
   height: 290px;
}
.footer-div {
   display: inline-block;
   margin-top: 50px;
}

<footer>
      <div id="footer-wrapper">
        <div id="footer-about" class="footer-div">
          <div class="footer-h1-wrapper"><h1>ABOUT US</h1></div>
          <ul>
            <li><a href="#/">FAQ</a></li>
            <li><a href="#/">Who We Are</a></li>
            <li><a href="#/">Terms of Service</a></li>
            <li><a href="#/">Shipping Policy</a></li>
          </ul>
        </div>
        <div id="footer-social" class="footer-div">
          <div class="footer-h1-wrapper"><h1>GET IN TOUCH</h1></div>
          <ul>
            <li><a href="#"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i></a></li>
          </ul>
        </div>
      </div>
  </footer>