Bootstrap: Make help-block inline

Question

I want the help-block to be inline with the input-field (if there is space available to the right of the input-field), but it is below the input-field no matter how wide the screen is. How can I 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 a plunk.

Answer 1

One of the things .help-block does is set display:block. If you don't want that, you can override it like this:

.help-block {
    display: inline;
}

Demo in Plunker

Answer 2

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