Позиционирование CSS для кнопки закрытия в форме

Question

Я создал форму поиска с помощью бутстрапа. Я также использовал jquery для создания кнопки поиска по удалению (x) при вводе текста, однако я застреваю, пытаясь получить его в той же строке, что и форма поиска (в идеале в поле справа). Как вы можете видеть на втором рисунке, когда «1» вводится в форму, кнопка создается под формой поиска. Я включил мой код ниже, любая помощь будет принята с благодарностью.

<form id="PWFS"> 
    <label for="Label">Info</label> 
    <button type="button" class="btn btn-link btn-xs"<i class="fa fa-question-circle fa-lg"></i></button> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="input-group btn-group"> 
     <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i></span> 
     <input type="text" class="form-control search" id="search" placeholder="Workflow #"> 
     <span id="searchclear" class="searchclear fa fa-times"></span> 
     </div> 
    </div> 
    <button id="WFFsearch" type="submit">Search</button> 
    </div> 
</form> 
</div> 
<br> 

CSS

.searchclear { 
    position: relative; 
    z-index: 10; 
    right: 5px; 
    top: 0; 
    bottom: 0; 
    height: 14px; 
    margin: auto; 
    font-size: 14px; 
    cursor: pointer; 
    color: #ccc; 
} 

Answer 1

Спасибо Lal, Фил и adamdc78. Мне просто нужно было изменить положение на абсолютное.