Twitter Bootstrap 3 - feedback glyphicons are shifted - css

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

Answer 2

Use position:absolute for glyphicon.
.glyphicon-remove::before {
left: 0;
position: absolute;
}
DEMO

Answer 3

only for Mobile Device Because you can use xs class. Add Style.
.form-control-feedback
{
right: 7px;
}
Fiddle Demo
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-control-feedback
{
right: 7px;
}
.
<!-- We'll use col-xs-* here, as JSFiddle's result window is really narrow -->
<div class="ibox col-xs-12">
<div class="ibox-content">
<form action="#">
<div>
<label>Location</label>
<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>
</div>
</form>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>