Align and center various elements in a Bootstrap 'row' - css

Question

Been having difficulty trying to center vertically a Font Awesome icon, a 2 text line div, and 2 more icons in the same Bootstrap row div. I managed to fake the needed outcome but after hours trying out numerous CSS properties I'd love to hear what the best solutions was.
So the items I need to position vertically centered so those stay that way regardless of the containing element size are the 'fa fa-building-o fa-4x' icon, the 2 lines of text to its right ("X5 Retail Group" and "Company address and contacts"), both are of different font size (which I attempted to achieve with <h5> and <h3> tags), and the 2 icons to the right.
It was not required to make the sections of a certain height. The line-height property contains a number convenient to me at the moment.
The code was designed for Firefox 39.
Here's a Plunkr link to my html: https://plnkr.co/edit/0BVnHFowRD53KOVoy1KU?p=preview
Below is the .html of the page.
body {
padding-top: 20px;
}
section#top1 {
line-height: 40px;
}
section#top2 {
line-height: 80px;
}
.monitoring {
background-color: #E8E8E8;
}
.monitoringh4 {
display: inline;
}
.h4buttonlike:hover {
cursor: pointer;
font-weight: bold;
}
section#top3 {
line-height: 60px;
}
section#top4 {
line-height: 80px;
}
.container {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
}
.container .col-md-12 {
background: #e6e6e6;
border-radius: 4px;
}
.container .logo {
display: inline;
margin: auto 0 auto 0;
width: 80px;
}
.container h4 {
font-size: 1.0em;
display: inline;
margin-left: 5px;
text-align: center;
}
section#top1 .container ul {
display: table;
margin: auto 0;
float: right;
}
section#top1 .container ul li {
display: table-cell;
padding-right: 15px;
}
.settings i {
vertical-align: middle;
}
.container i {
margin-right: 5px;
}
.dropdown {
display: inline;
margin-left: 5px;
margin-top: 3px;
}
.myclass {
text-align: right;
}
section#top4 .brands {
position: absolute;
top: 50%;
display: inline-block;
/* margin-left: 20px; */
transform: translate(5%, -55%);
}
.exp {
height: 56px;
width: 44px;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.my-icons {
position: absolute;
top: 50%;
right: 15px;
transform: translate(-60%, -50%);
display: inline-block;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section id='top1'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<img class='logo' src='http://www.toennies.com/uploads/pics/fTRACE-Logo_02.png'>
<h4>Company name</h4>
<ul>
<li>Total items: 100</li>
<li style='color: #009900;'>Oline: 82</li>
<li style='color: #787878;'>Offline: 16</li>
<li style='color: #FF0000;'>Damaged: 6</li>
</ul>
</div>
<div class='clearfix'></div>
</div>
</div>
</section>
<section id='top2'>
<div class='container'>
<div class='row'>
<div class='col-md-9 monitoring'>
<div class='monitoringh4'>
<h4>Monitoring</h4>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Reports
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Report 1
</li>
<li>Report 2
</li>
<li>Report 3
</li>
</ul>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tune
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Tune 1
</li>
<li>Tune 2
</li>
<li>Tune 3
</li>
</ul>
</div>
</div>
<div class='col-md-3 monitoring'>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
John Doe (Admin)
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Jane Doe
</li>
<li>Jack Doe
</li>
<li>Jimmy Doe
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='top3'>
<div class='container'>
<div class='row'>
<div class='col-md-12 settings'>
<h4><i class="fa fa-desktop fa-2x"></i>Tuneup > Company profile > X5 Retail Group</h4>
</div>
</div>
</div>
</section>
<section id='top4'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='exp'><i class="fa fa-building-o fa-4x"></i>
</div>
<div class='brands'>
<h3>X5 Retail Group</h3>
<h5>Company address and contacts</h5>
</div>
<div class='my-icons'>
<h5><i class="fa fa-pencil-square-o"> Edit</h5>
</i>
<h5><i class="fa fa-print"></i>Print</h5>
</div>
</div>
</div>
</div>
</section>
Thank you.