How to put warning/error message correctly in twitter bootstrap horizontal forms (on the right side of the input)?

Question

I want to put warning message on the right side of the input in horizontal form in tbs3.

I have this at the moment:

<div class="form-group">                                                                                                          
    <label class="col-sm-2 control-label">Лицевой счет: *</label>                                                                 
    <div class="col-sm-1">                                                                                                        
        <input class='form-control' placeholder='л/с' autocomplete='off' id='acc' type='text' value='{$_POST['acc']}' name='acc'> 
    </div>                                                                                                                        
    <div class="col-sm-9">                                                                                                        
        <p class="bg-danger">Here is a tip!</p>                                                                                   
    </div>                                                                                                                        
</div>  

As you see, I am trying to achieve what I want by <p class="bg-danger">...</p> element. Result is:

Also, I tried this (div with alert class):

 <div class="form-group">                                                                                                          
     <label class="col-sm-2 control-label">Лицевой счет: *</label>                                                                 
     <div class="col-sm-1">                                                                                                        
         <input class='form-control' placeholder='л/с' autocomplete='off' id='acc' type='text' value='{$_POST['acc']}' name='acc'> 
     </div>                                                                                                                        
     <div class="col-sm-9">                                                                                                        
         <div class="alert alert-warning" role="alert">Here is a tip!</div>                                                        
     </div>                                                                                                                        
 </div>     

I got this:

So the question is how I can render my warning message correctly in styled block on the right side of the input?

Correctly means with same height as input has.

Answer 1

To resolve this, you could create a custom CSS rule named whatever you want (I named mine .alert-error). Then just use this CSS:

.alert-error {
   padding: 6px 15px;
   height: 34px;
}

The height of the control is 34px. Just readjust the padding in the alert and set its height to 34px also.

I used your second example to come to this conclusion, by the way. I hope this helps you out.