How to style input with error reporting add-on - twitter bootstrap

Question

I am trying to create an input field with the addition of a radio domain for the error message (.help-block). It works great without radio documents . But with the addon, the text goes to a new line under the input field.

it looks like this:

HTML

<div class="input-group has-error">
  <span class="input-group-addon">
    <input type="radio" name="answer" value="a">
  </span>
  <input type="text" class="form-control" placeholder="Your answer here..." name="a" id="a">
  <span class="help-block">The a field is required</span>
</div>

So what should I do with bootstrap 3.

Answer 1

I did it wrong.

<div class="form-group has-error">
  <label for="a">Answer A</label>
    <div class="input-group ">
      <span class="input-group-addon">
        <input type="radio" name="answer" value="a">
      </span>
      <input type="text" class="form-control" placeholder="Your answer here..." name="a" id="a">
   </div>
   <span class="help-block">The a field is required.</span>
</div>

Answer 2

If you want to show messages in one line, but not help-block(if this is enough), you can use tool-tip, here DEMO

HTML

 <div class="input-group has-error"> 
    <span class="input-group-addon">
        <input type="radio" name="answer" value="a" class=""  />
    </span>

    <input type="text" class="form-control " placeholder="Your answer here..." name="a" id="a" /> 
    <span class="input-group-addon">
        <span data-toggle="tooltip" title="" data-container="" >
           This field is required
        </span>
    </span>
</div>