How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone extension. Is there a way to achieve this?
<div class="row">
<div class="form-group col-md-5">
<label for="telephoneNumber">Telephone Number</label>
<div class="form-inline">
<input type="text" class="form-control" id="telephoneNumber1" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber2" maxlength="3" size="3">-
<input type="text" class="form-control" id="telephoneNumber3" maxlength="3" size="3">Ext
<input type="text" class="form-control" id="extension" maxlength="3" size="3">
</div>
</div>
<div class="form-group col-md-4">
<label for="emailAddress">Email Address</label>
<input type="text" class="form-control" id="emailAddress">
</div>
</div>