Position fields in a form correctly - html

Question

I know this is basic, I've lost hours on this, read posts, books, etc and it doesn't matter: I just don't understand how CSS works...
I want to have field 2) below field 1) in the following form:
<label>1) Select date</label>
<p>
<select name="data" id="data" form="configs">
<option value="custom">Custom</option>
<option value="thismonth">This Month</option>
<option value="lastmonth">Last Month</option>
<option value="ytd">Year to Date</option>
</select>
</p>
<div id="frombox">
<label for="from">From</label>
<br \>
<input type="text" class="box" name="from">
</div>
<div id="tobox">
<label for="to">To</label>
<br \>
<input type="text" class="box" name="to">
</div>
<label>2) Select fields to import</label>
<p>
<input type="text " name="datepicker " id="datepicker " required/>
</p>
With the CSS:
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
}
.box {
width: 100px;
}
You may see a live example here

Answer 1

try this
http://jsfiddle.net/isqware/y3mf4q2j/
#frombox {
float:left;
margin-left: 5px;
width: 150px;
}
#tobox {
float:left;
margin-left: 5px;
width: 150px;
clear:both;
}
.box {
width: 100px;
}
label {
clear: both;
display: block;
}