Styling a 5-column bootstrap footer - html

Question

Sorry if it's a stupid question, I'm only starting to learn HTML, CSS and bootstrap. I've been trying to get a five-column footer on bootstrap.
So far I have achieved the five columns, but after hours of trying different things I have given up. I can't seem to figure out how to align the items in these columns.
You can see the full site here:
https://stevenarroyave.github.io/UPTAKE/
and the repo here:
https://github.com/stevenarroyave/UPTAKE
this is what I want it to look like:
https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing
<footer>
<div class="col-sm-12 text-left">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<img id="logo" class="logo" src="img/FooterLogo.png"></img>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">UPTAKE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>About us</h5>
<li class="list-inline-item">
<h5>Contact Us</h5>
</li>
<li class="list-inline-item">
<h5>Blog</h5>
</li>
</ul>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">HELP</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>FAQ</h5>
<li class="list-inline-item">
<h5>Tips and suggestions</h5>
</li>
<li class="list-inline-item">
<h5>Customer service</h5>
</li>
</ul>
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LEGAL</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>Privacy Notice</h5>
<li class="list-inline-item">
<h5>Terms of use</h5>
</li>
<li class="list-inline-item">
<h5>How to use Uptake</h5>
</li>
</ul>
</div>
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LANGUAGE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<input type="text" placeholder="English">
</li>
</ul>
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
<div class="row">
<div class="col-12 text-right">
<hr>
<h5>Follow us!</h5>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</footer>
As of now, I achieved the 5 columns, but as you can see, they all start at different heights, I'd like them to start at the same height, and stop the logo on the first column from resizing when resizing the window.
I also don't know how to get the pink icons on the bottom to show on the same line next to "Follow us!"
Thanks in advance for any help.

Answer 1

I am found some bug and fixed here screenshot change using the red mark arrow.
And your output is:

Answer 2

You need to defined align item to baseline. Try it specifically for footer row.
.row { align-items: baseline;}