Значок оверлея на поле ввода

Question

Я пытаюсь наложить значок x на свой серый текстовый ящик, сохраняя при этом его 100% ширину. Это возможно? И если да, то как? До этого этапа все, что я могу сделать, это заставить его работать, если ширина серого текстового поля составляет 90%.

HTML

<div class="container" id="waypoints-page"> 
    <div id="waypoints"> 
     <div class="waypoint-container"> 
      <input type="text" class="form-control booking waypoint" placeholder="Via" id="first-waypoint"> 
      <label><i class="fa fa-times" id="clear-waypoint-button"></i></label> 
      <hr> 
     </div> 
    </div> 
</div> 

CSS

.booking { 
    outline: none; 
    border: none; 
    -webkit-box-shadow: none !important; 
    -moz-box-shadow: none !important; 
    box-shadow: none !important; 
    background-color: #ccc; 
} 
input.form-control.booking, .twitter-typeahead { 
    width:100%; 
    display: inline-block; 
} 
.tt-dropdown-menu { 
    padding: 1em; 
    background-color: #ccc; 
    width: 100%; 

Fiddle here

Answer 1

Ну, вы можете поместить его абсолютно.

.container { 
    position: relative; 
} 
.fa { 
    position:absolute; 
    top: 8px; 
    right: 25px 
} 

См Fiddle.