Making text appear next to icon - html

Question

I want my "Navigation"text to appear just next to the icon, but I can't seem to be able to do it.
<nav class="nav-mobile">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<div class="icon"><span class="icon-bar">
</span><span class="icon-bar">
</span><span class="icon-bar">
</span></div> <h3> Navigation</h3></a>
<div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">
</div></div></div></div>
</nav>
css
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #6c6d71;
}
nav .btn-navbar
{
display: block;
padding: 10px 15px;
border-top: solid 1px #d7d7d7;
border-bottom: solid 1px #d7d7d7;
}
https://jsfiddle.net/fLhrgw63/1/

Answer 1

Both H3 and the .icon div are block elements which will be 100% width by default. You need to change them to inline-block so that they are only as wide as the content within them.
.icon, h3 {
display:inline-block;
vertical-align:middle;
}
https://jsfiddle.net/fLhrgw63/3/

Answer 2

.icon and h3 are block elements. Making them inline-block should work:
CSS:
.icon {
display: inline-block;
width: 30px;
vertical-align: middle;
}
.nav-title {
display: inline-block;
}
HTML
<h3 class="nav-title">Navigation</h3>
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #6c6d71;
}
nav .btn-navbar {
display: block;
padding: 10px 15px;
border-top: solid 1px #d7d7d7;
border-bottom: solid 1px #d7d7d7;
}
.icon {
display: inline-block;
width: 30px;
vertical-align: middle;
}
.nav-title {
display: inline-block;
}
<nav class="nav-mobile">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<div class="icon"><span class="icon-bar">
</span><span class="icon-bar">
</span><span class="icon-bar">
</span>
</div>
<h3 class="nav-title"> Navigation</h3>
</a>
<div class="nav-collapse collapse" aria-expanded="false" style="height: 0px;">
</div>
</div>
</div>
</div>
</nav>