List Position Error when using bootstrap has-feedback has-error styling dynamically

[TharinduAmila]

I have added typeahead to an email input and wanted to customize this to suggest domains. Anyhow I am not able to get typeahead suggestions to align correctly with my input.
This is my html
<div id="emailFormGroup" class="form-group">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="off" name="email" class="form-control" dataprovide="typeahead" placeholder=" [email protected] ">
<span id="email-feedback" class="form-control-feedback hide" aria-hidden="true"><i id="valid-msg-email" class="fa fa-check hide"></i><i id="invalid-msg-email" class="fa fa-times hide"></i></span>
</div>

I add classes has-feedback and has-error dynamically according to user input
This makes the typeahead list to jump around when the styling changes.

It rectifies when the styling stays the same