height as parent and position inside navbar - html

Question

I've modified for the third time, and now it looks clearer. Here is the link:
http://jsfiddle.net/3w2gdfqp/
html
<div id="navWrap">
<div class="mainContainer">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav col-md-18">
<li class="active">HOME</li>
<li>OUR PHILOSOPHY</li>
<li>OFFERS</li>
<li>FINE WINE</li>
<li>CONTACT</li>
</ul>
<div class="searchBoxContainer col-md-5 pull-right">
<div id="searchOurWines" class="blackBox">
<span id="textSearchBox" class="textInBox">SEARCH OUR WINES</span>
<span id="iconSearchBox">
<span class="icon-icn-bottle"></span>
<a href=""><span id="arrowSearch" class="icon-icn-sort_down"></span>
<span id="arrowSearch2" class="icon-icn-sort_up"></span></a>
</span>
</div>
</div>
<div class="clearfix"></div>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
css
/*Navigation bar*/
#navbar{
padding:0;
}
.navbar{
border-radius:0;
min-height:40px;
}
.navbar.navbar-default{
border:0;
margin:0;
}
.navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
}
#navWrap{
background-color:#808080;
}
#arrowSearch2{
display:none;
}
.searchBoxContainer{
border:1px solid pink;
}
as you see, the SEARCH OUR WINES, doesn't have the same height as the navigation bar, and I've tried everything I could!!
Any suggestions??
thanksss

Answer 1

See if the below one works :
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>OUR PHILOSOPHY</li>
<li>OFFERS</li>
<li>FINE WINE</li>
<li>TOUR & TASTE</li>
<li>CONTACT</li>
<li><div class="searchBoxContainer col-md-5 pull-right">
<div id="searchOurWines">
<div id="containerSearch" class="blackBox">
<span id="textSearchBox" class="textInBox">SEARCH OUR WINES</span>
<span id="iconSearchBox">
<span class="icon-icn-bottle"></span>
<a href=""><span id="arrowSearch" class="icon-icn-sort_down pull-right"></span>
<span id="arrowSearch2" class="icon-icn-sort_up pull-right"></span></a>
</span>
</div>
</div>
</div>
</li>
</ul>
and shift the search box at right side by css if it is not already