How to make the bottom part of 2 divs align - html

Question

Im currently trying to make the bottom of two divs, a title and a navbar, to line up vertically, but I'm having a bit of trouble figuring out how to make that work. vertical-align:bottom in the CSS doesn't seem to work. To clarify, I want the "GOT/IT" text and the nav bar text elements to line up vertically (bottom). The code is shown here:
.navbar-default {
padding-top: 65px;
padding-left: 45px;
padding-right: 45px;
margin-left: 0px;
margin-right: 0px;
border-radius: 0px;
border-bottom: 10px solid #2e9eed;
}
.header-text {
font-size: 64px;
color: blue;
position: relative;
padding-bottom: 20%;
}
.header-item-text {
background-color: green;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class = "header-text">GOT/IT</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- Desktop + Tablet View -->
<div class="hidden-xs">
<div class="pull-right collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="header-item-text">THE WHY
</li>
<li class="header-item-text">THE WHAT
</li>
<li class="header-item-text">VALIDATE
</li>
<li class="header-item-text">ABOUT
</li>
<li class="header-item-text">CONTACT
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>

Answer 1

I am assuming you are trying to vertically align the bottom of two columns. You can try using a table for this like the following:
<table >
<tr>
<td style="vertical-align:bottom">
<div>
....
....
</div>
</td>
<td style="vertical-align:bottom">
<div>
....
....
</div>
</td>
</tr>
</table>

Answer 2

You can give equal padding-left to both div.
I would suggest use bootstrap CSS.
You can also use HTML table tags.