How can I keep a form with divs from breaking line? - html

Question

I have been struggling because I have this form that has different inputs on sub divs. Whenever I put the opening form tag before the first input, the line breaks. If I put it after it, it will stay fine. I have tried adding:
display:inline
to different classes, but it doesn't seem to do the trick.
Here is the fiddle: https://jsfiddle.net/tL50dhcu/
Can anyone help me keep it in line?

Answer 1

.form-horizontal {
display: flex;
flex-flow: row nowrap;
}
if you make the container of the form flex , and set it to nowrap

Answer 2

EDIT: Here is a more succinct way to do what you are trying to do: http://codepen.io/dcain19/pen/xVVyao
Try the example below. Notice how the search input was put inside the input-group-btn class. Now, you will have to change your border-radius on the button to make the right borders rounded, but that should get you what you need.
<form method="post" class="form-horizontal" role="form" action="{% url 'search' %}">
<div class="input-group-btn">
<div class="btn-group" role="group">
<input type="text" class="form-control" id="searchInput" placeholder="Search" name="search" required />
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-group">
<label for="filter">Industry</label>
<select class="form-control" id="searchIndustry" name="industry">
<option value="any">Any</option>
</select>
</div>
<div class="form-group">
<label for="filter">Country</label>
<select class="form-control" id="searchCountry" name="country">
<option value="any">Any</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>