Align two input textbox and one button horizontally - asp.net

Question

I have two inputs, one button and one drop down menu, how do i align it so that its next to each other. I have created div for each element but things dont look right. this is what i have done:
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="button" style="display: inline-block;">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"> </i></button>
</div>
My Css: during this process i have noticed the above example works fine but only if i create another web-page if i use my current web page then things dont stay the way i want
.class1{
display: inline-block;
width: 15px;
}
.input1{
display: inline-block;
width: 200px;
padding-left: 20px;
}

Answer 1

It looks like you're using bootstrap.
So you can align it all using rows and cols.
like so :
<div class="row class1">
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>Search</button>
</div>
</div>
a row gives you a maximum of 12 cols.. so depending on how many aligned items you want, you can do :
<div class="col-md-3"></div> x 4 to get a 4 col layout
http://jsfiddle.net/mT6VV/7/

Answer 2

Try this Code :-
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
use this Css :
.class1 {
display: inline-block;
}
.input1 {
display: inline-block;
width: 200px;
padding-left: 20px;
}
button {
width:90px;
height:20px;
}
you don't have need to put extradiv tag in your design source.
Demo For Alignment
it is working.