Input box and checkbox’s heights are different - html

Question

I made a login box using Bootstrap 3.0.3. On the second line, the password input box’s and check box”s (labelled Auth) heights are different. On mobile, the difference is even more noticeable.
How can I make their heights match?
Bootply
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" role="form" class="form-inline">
<div id="outlogin_box" name="outlogin_box">
<input type="hidden" name="url" value="<?=$outlogin_url?>">
<input type="text" class="form-control input-sm" name="mb_id" maxlength="20" itemname="id" placeholder="login id">
<div class="input-group"><!-- needs height alignment -->
<input type="password" class="form-control input-sm" name="mb_password" id="outlogin_mb_password" maxlength="20" itemname="password" placeholder="password">
<span class="input-group-addon">
<div class="checkbox">
<label>
<input type="checkbox" name="auto_login" title="Remember me" value="1" onclick="if (this.checked) { if (confirm('자동로그인을 사용하시면 다음부터 회원아이디와 패스워드를 입력하실 필요가 없습니다.\n\n\공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?')) { this.checked = true; } else { this.checked = false; } }">
Auto
</label>
</div>
</span>
</div>
<div class="input-group">
<button type="submit" class="btn btn-success btn-sm btn-group-justified" >Login</button>
</div>
<div class="input-group">
<div class="btn-group btn-group-justified">
<a class="btn btn-default btn-sm" title="Register" href="<?=$g4[bbs_path]?>/register.php">Register</a>
<a class="btn btn-default btn-sm" title="회원 id, password 찾기" href="javascript:win_password_lost();">아이디찾기</a>
</div>
</div>
</div>
</form>

Answer 1

Change
<input class="form-control input-sm" name="mb_password" ...
to
<input class="form-control" name="mb_password" ...
http://www.bootply.com/98872
You have modified the height of the input by adding a class "input-sm".

Answer 2

Try this very simple:
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}

Answer 3

You can set fixed width and height values for HTML textboxes/checkboxes in CSS by doing the following...
input[type="text"] {
width: 10%;
height:3%;
}
input[type="password"] {
width: 10%;
height:3%;
}
input[type="checkbox"] {
height:2%;
}
You can also set them using px instead of percentages.
Hopefully setting a fixed height and width should resolve your conflicting size problems.

Answer 4

Try overriding bootstrap CSS with this:
.input-group-addon .checkbox {
margin: 8px 5px 0 !important;
}
.input-group-addon {
padding:0 !important;
}

Answer 5

change your css of checkbox class display which is display : inline-block to display: inline and the try it
.form-inline .radio,.form-inline .checkbox{display:inline-block;padding-left:0;margin-top:0;margin-bottom:0}
to
.form-inline .radio,.form-inline .checkbox{display:inline;padding-left:0;margin-top:0;margin-bottom:0}
in bootstrap.min.css