How to make a button float next to the input form? - html

Question

I have the following form, and my button is an image button. I want in to be on the same line with the email input but I cannot figure out how to accomplish it. I made my button float towards the right but it is not aligned on the same line with the input field.
Form:
.control-group{
float:left;
}
.control-group.button{
clear:both;
}
<form class="well email-form" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="control-group">
<div class="field-control">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/>
</div>
</div>
<div class="control-group button">
<div class="field-control">
<input type="image" src="http://placehold.it/25x25" name="submitEmail" class="button"/>
</div>
</div>
</div>
</form>
CSS:
.control-group{
float:left;
}
.control-group.button{
clear:both;
}

Answer 1

You can use display: inline-block and vertical-align: bottom like:
.control-group {
display: inline-block;
}
input[type="image"].button {
vertical-align: bottom;
}
<form class="well email-form" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="control-group">
<div class="field-control">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" " />
</div>
</div>
<div class="control-group button">
<div class="field-control">
<input type="image" src="http://placehold.it/25x25" name="submitEmail" class="button" />
</div>
</div>
</div>
</form>

Answer 2

There are classes built into bootstrap to do this. You can add the form-inline class to your form and replace your control-group class with form-group. This way you don't have to create any custom css to do the alignment. You also don't need the field-control class/div unless that's part of your custom css.
<form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="form-group">
<div class="field-control">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" " />
</div>
</div>
<div class="form-group">
<div class="field-control">
<input type="image" src="images/tree.png" name="submitEmail" class="button" />
</div>
</div>
</div>
</form>

Answer 3

you dont have to wrap under <span> tag
Fiddle
http://jsfiddle.net/m4rz38h7/2/
.control-group{
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
.button{
width:20px;
height:20px;
}