Loading tray: Make an integrated help box

Question

I want the help box to be embedded with an input field (if there is free space to the right of the input field), but it is below the input field no matter how wide the screen is. How to make it inline?

Here is the form:

<form class="form-inline" role="form"> <div class="form-group"> <label for="query">Search</label> <input type="text" ng-model="query" class="form-control" id="query" placeholder="Enter search text"> <span class="help-block"> Search in any field... </span> </div> </form> 

And here is the plunk .

Answer 1

One of the .help-block stuff is really display display:block installed. If you do not want this, you can override it as follows:

 .help-block { display: inline; } 

Demo at Plunker

Answer 2

 /* Make the help displayed horizontally and set with same color with help-block */ .help-inline { display: inline; color: #737373; } 

Answer 3

I know the old question, but for those who come across this, just use inline-block instead of help-block as your class.