Span Not Holding Continer

Question

Я пытаюсь поместить значок в крайнюю правую часть моих текстовых входов. Однако для кода, который у меня есть, значки продолжают подниматься над div, который содержит поле ввода. Я не могу понять, почему он вырывается из контейнера. JS Fiddle можно найти по адресу http://jsfiddle.net/fjuovf1h/. Любая помощь приветствуется.

HTML

<div class="container content"> 
<form accept-charset="UTF-8" action="/" class="sky-form" id="sky-form" method="post"> 
    <div class="row"> 
    <div class="col-md-12"> 
    <header>Header</header> 
    <fieldset> 
     <div class="row"> 
     <section class="col col-4"> 
     <div class="form-group"> 
     <label class="inline">From</label> 
     <span class="icon-append fa fa-plane"></span> 
     <input class="form-control inline" id="flight_depart_city" name="flight[depart_city]" placeholder="City, State" type="text" /> 
     </div> 
     </section> 
     </div> 
    </fieldset> 
    </div> 
    </div> 
    </form> 
</div> 

CSS можно найти на JSFiddle

Answer 1

Это потому, что span имеет абсолютное позиционирование, поэтому он будет размещен по отношению к ближайшему родителю, который не имеет статического позиционирования. Это случается как div с class="col-md-12".

Вы можете установить позиционирование на родительский элемент для полей, которые сделают значок размещения относительно что:

.form-group { position: relative; }