Checkbox size makes other elements drop under the line

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://ift.tt/2qroZ5g"><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>