Pull right button with input in header - html

Question

I'm trying to pull on the right in the header a button with a input text field, this is my code:
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix"></div>
</div>
so as you can see, I have on the left the title of the header and on the right i want on the same line the input and one or more buttons, the problem is if I add only button it's work perfectly, all on the same line, if I add a form-group in input go in two line as you can see in the image below.
How can I have all in the same line?
Thanks

Answer 1

Try to make this div
div class="form-group label-floating"
go inline with the button
button id="show-hide-filter-button"
using css "display: inline-block" on the div (by default it goes with "display: block")

Answer 2

Add display:inline to the .form-group, or display:flex to the .pull-right

Answer 3

You can do this with Flexbox just use display: flex on both header and pull-right class.
.page-header, .pull-right {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="page-header">
<div class="pull-left">
<h2>Header</h2>
</div>
<div class="pull-right">
<div class="form-group label-floating">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
</div>

Answer 4

The buttons and the field container should have "display:inline-block;":
<div class="page-header">
<div class="pull-left" style="float:left;">
<h2>Header</h2>
</div>
<div class="pull-right" style="float:right;">
<div class="form-group label-floating" style="display:inline-block;">
<label class="control-label" for="focusedInput1">Search</label>
<input class="form-control" id="focusedInput1" type="text">
</div>
<button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
</div>
<div class="clearfix" style="clear:both;"></div>
</div>

Answer 5

Try this fiddle
<nav class="navbar page-header">
<div class="container">
<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>
<a class="navbar-brand" href="#">Header</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control search">
</div>
<button type="submit" class="btn btn-transparent">Mostra Filtro</button>
</form>
</div>