My current code utilizes the form-inline class to align all controls on a single line. However, I've observed that when the window size is adjusted, the button next to the text box moves to the next line unintentionally. To better illustrate this issue, please refer to the following images:
https://i.sstatic.net/6A9yE.png
https://i.sstatic.net/zkfiW.png
Below is the snippet of code in question:
<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>