How can I vertically align the user and the search bar on the right side of the page?
#search {
float: right;
margin-top: 9px;
width: 250px;
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
}
...
</div>
</div>
</p>
</div></questionbody>
<exquestionbody>
<div class="question">
<p>How do I align user and the search bar on the right and vertically aligned?</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>#search {
float: right;
margin-top: 9px;
width: 250px;
}
.search {
width: 230px;
height: 30px;
position: relative;
line-height: 22px;
display: flex;
}
.search button {
margin: 0;
background-color: transparent;
border: 0;
}
.search button span {
font-size: 1.2rem;
color: #fff;
}
.search input {
box-sizing: border-box;
width: 0;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
line-height: 18px;
padding: 0;
border: 0;
margin-left: 180px;
visibility: hidden;
}
.search:hover input,
.search input:focus {
width: 180px;
margin-left: 0px;
padding: 0 2px 0 2px;
border: 2px inset;
border-radius: 3px !important;
visibility: visible;
}
.search button span:hover, .search button:hover {
background-color: transparent;
}
.topbar-user img{
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 15px;
}
.user-menu {
color: #fff;
cursor: pointer;
margin-left: 15px;
margin-right: 15px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
<div class="navbar-menu-wrapper d-flex align-items-center">
<button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3"
type="button" data-toggle="minimize">
<span id="navbar-icon" class="fa fa-arrow-left"></span>
</button>
<ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
</ul>
<div class="text-right">
<div class="search">
<input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search"/>
<button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search</span></button>
</div>
<div class="dropdown user-menu">
<a class="dropdown-toggle topbar-user" id="navbar-user" data-toggle="dropdown">
<span>USER</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
<a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
<a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
<a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
</div>
</div>
</div>
</div>
</nav>