Prevent control go ahead with form-inline - html

Question

I'm using form-inline class that put all the controls on the same line, but I noticed that when I resize the window the button near the textbox go to the next line. I want to prevent this. Take a look at the image:
and this is the code:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-2 hideable-sidebar">
<div class="well">
<span><b>Resources</b></span>
<form class="form-inline">
<input type="text" placeholder="type text here"
class="form-control" id="resource_filter" />
<button class="clear btn btn-default btn-sm" type="button"
title="clean">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</form>
</div>
</div>
</div>
</div>

Answer 1

You'll want to use the Bootstrap Button Addons under input groups. This way it will stay proportional during a window resize. Be sure that your input and button are using the same size:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12 hideable-sidebar">
<div class="well">
<span><b>Resources</b></span>
<form class="form-inline">
<div class="input-group">
<input type="text" placeholder="type text here" class="form-control" id="resource_filter" />
<span class="input-group-btn">
<button class="clear btn btn-default" type="button" title="clean">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>