Checkbox size makes other elements drop under the line - html

Question

I have a form group, it contains of an input field with an addon, a checkbox with an image and a button next to them, they're displayed next to each other, but when i give my checkbox height and width the image and the button move down i don't know why, how can i fix that? here is my code:
.box{
height: 34px;
width: 34px;
}
.btn-default{
height: 34px;
width: 34px;
}
<div class="col-lg-12 form-group">
<div class="pull-right">
<img src="http://placehold.it/34x34"><input type="checkbox" class="box">
<button type="button" class="btn btn-default">+</button>
</div>
<div>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control"/>
</div>
</div>
</div>

Answer 1

You can use grid system to easily manage your layout
Please check below example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
input.checkbox-input{height: 34px;width: 34px;margin-top: 0;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 form-group">
<div class="col-md-1 col-sm-1 col-xs-1">
<img src="http://placehold.it/34x34">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<input type="checkbox" class="checkbox-input">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn" value="+">+</button>
</div>
<div class="col-md-9 col-xs-9 input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>