Alignment of input text fields in angular html - html

Question

<div class="form-group">
<label class="lable label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
My Css code:
label {
display: inline-block;
width: 140px;
text-align: left;
}
input {
display: inline-block;
width: 140px;
text-align: left;
}
I have my Following Output. But I want to align these input text fields one by one with same proper alignment.

Answer 1

Share your css to properly understand the style, but I am assuming the typo lable instead of label may affect the css rules
<div class="form-group">
<label class="label label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>

Answer 2

I've done only for geo-location. But if like to get the idea of bootstrap, you can refer W3schools or Bootstrap offcial web
The working fiddle Jsfiddle
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-xs-6">
<label class="control-label label-default"> Google Location</label>
</div>
<div class="col-xs-6">
<div class="form-group">
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
</div>
</div>
</form>
</div>
Update 1 As you updated the requirement, I've updated the fiddle too. So you can easily remove <div class="row"> and get your expectation