Align responsive text - html

Question

I am trying to align the my icon's text to be on the same level. However, they are distorted when the window is resized bigger as shown in the fiddle. How can I make them to be beside each other?
Here's my fiddle:
https://jsfiddle.net/whywymam/72qp7c6L/
My HTML:
<div id="btnTopInline">
<ul class= "nav navbar-nav navbar-right hidden-xs">
<div class="col-sm-3 col-md-3 col-lg-3">
<li>
<div class="indivColl">
<a href="signupLogin.php">
<img src="https://i.stack.imgur.com/pBLqM.png" class="indi">
<p class="indit">Job Seeker</p>
</a>
</div>
</li>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<li>
<div class="empColl">
<a href="signupLoginEmp.php">
<img src="https://i.stack.imgur.com/Dbaoj.png" class="emp">
<p class="empt">Employer</p>
</a>
</div>
</li>
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
</ul>
</div><!-- end btnTopInline -->
<div class="col-xs-2 col-xs-push-6 padBtnRight">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLogin.php">
Job Seeker<br>Log In
</a>
</button>
</div>
<div class="col-xs-2 col-xs-push-7">
<button type="button" class="btn btn-login visible-xs">
<a href="signupLoginEmp.php">
Employer<br>Log In
</a>
</button>
</div>
<div class="clearfix visible-xs-block"></div>