Bootstrap form with fixed column width - css

Question

I have an inline form with the following code:
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-2">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class="form-group col-xs-2">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
when I run it it looks like this:
When I resize the Browser it's looking like this:
My question is how I can have input fields with fixed width and fixed distance between columns?
Thanks

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="card" style="width:100%;">
<div class="card-block">
<form class="form-inline">
<div class="row">
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="displayName">Display Name</label>
<input class="form-control" ng-model="displayName" style="height:30px;" id="displayName">
</div>
<div class=" col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label for="officeEmail">Office Email</label>
<input class="form-control" ng-model="officeEmail" style="height:30px;" id="officeEmail">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Is this the same that you are looking for?
Hope this helps.