Twitter Bootstrap 3 - feedback glyphicons are shifted

Question

When I put 2 fields in a row, their glyphicons are being shown with a nasty offset:

<div class="form-inline">
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</div>

The full JSFiddle is here: https://jsfiddle.net/v_melnik/f8u9hvLa/6/

Is there a way to make them being shown properly?

Lots of thanks to everyone!

UPDATE: Someone marked this question as a duplicate of this one. But this question isn't about adding a glyhicon, it's rather about using glyphicons with a "narrowed" input box.

Answer 1

change your html

    <div class="form-inline">
      <div class="col-xs-6">     
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
      <div class="col-xs-6">
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
    </div>

jsfiddle