Aligning the controls in a DIV - html

Question

My second week of learning and doing WebDevelopment! I have written this Bootstrap layout and the result is in the picture below.
Note the areas marked as yellow? why is that happening? How can I fix it? I know I can for example play around with margin-left ,etc.. to make it look right but I am still thinking if I define they correctly in bootstrap, it shouldn't have this problem.
Here is the Bootply to see the issue: http://www.bootply.com/zRyxHyhdbM
Here is the generated HTML code:
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-9 form-group">
<input class="col-sm-2" id="AdminPhone" name="AdminPhone" type="text" value="">
<label class="control-label col-sm-1" for="Ext">Ext</label>
<input class="col-sm-2" id="AdminExt" name="AdminExt" type="text" value="">
</div>
</div>

Answer 1

The misalignment is there because, the email input box is col-sm-4. To align bottom inputs we have to fit them with in col-sm-4. You can add margin-left(approx 12px) to align it but it will not be responsive.
Hence, I have changed the markup a little bit to remain responsive--
Link --- http://www.bootply.com/x0fgleMTp2
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4 multi-row">
<span class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></span>
<span class="col-sm-2"><label class="control-label" for="Ext">Ext</label></span>
<span class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></span>
</div>
</div>

Answer 2

Is this what you wanted to achieve? Hope it may help.
<div class="container">
<div class="row">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-inline">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-group pull-right">
<label for="exampleInputEmail3">Ext</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Ext">
</div>
</div>
</div>
</div>
The fiddle