Error message breaks layout when displayed

Question

I have the following field on my page

Which is constructed with the following HTML

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
   @Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })
</div>

pretty basic stuff, I currently have jquery form validation embedded into my application which looks like this:

I have removed all the fields besides this one.

 $('#registrationForm').validate({
    rules: {
        "Username": "required",

    },
    messages: {
        "Username": "Please enter your chosen Username",

    }
});

When I leave the field blank and press submit it looks like this

As you can see the user glyphicon height has been increased to cater for the error message.

The rendered HTML looks like this:

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
</div>

Can anyone suggest why this might be happening?

Update

This is what is render when the error message is displayed

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control error" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
<label class="error" for="Username">Please enter your chosen Username</label>
</div>

** Update after adding additional styles to .Error class **

Answer 1

There's an extra <span> that gets generated when you do this! I guess it should be .error. Just give a position: absolute; to it.

.error {position: absolute; right: 0; width: 100%; bottom: -1em;}

Or just take the error text out of the .input-group:

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
</div>
@Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })

Answer 2

Add the following style to the error message

position : absolute