Css Align Div next to another Div - html

Question

Can someone please help me with this css? I am very new and for some reason cannot figure something out that seems to be extremely simple. What I am trying to do is have gvw_field align next to the ew_field. I am not sure how to align the <div> 's next to each other.
http://jsfiddle.net/r45xfbex/
#gvw_field {
text-align:center;
}
<div class="clearfix">
<div id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>

Answer 1

Working jsFiddle Demo
The display: inline property will do it.
#gvw_field, #ew_field{
display: inline;
}
Readup about display property on MDN.
Working code snippet:
#gvw_field {
text-align:center;
}
#gvw_field, #ew_field{
display: inline;
}
<div class="clearfix">
<div id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>

Answer 2

Use floats to align each <div>
#gvw_field {
text-align:center;
}
.column{
width: 33.33%;
float: left;
}
<div class="clearfix">
<div class="column" id="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value="">
</div>
<div class="column" id="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value="">
</div>
<div class="column" id="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value="">
</div>
</div>

Answer 3

use float and don't use same id for many items:
CSS:
.ft_field
{
float: right;
width: 50%;
}
label {
display: inline-block;
width: 170px;
}
.gvw_field {
float: right;
width: 50%;
}
HTML:
<div class="clearfix">
<div class="ew_field">
<label for="ew">Empty Weight:</label>
<input type="text" name="ew" id="ew" value=""/>
</div>
<div class="gvw_field">
<label for="gvw" >Gross Vehicle Weight:*</label>
<input type="text" name="gvw" id="gvw" value=""/>
</div>
<div class="ft_field">
<label for="ft">Feet:</label>
<input type="text" name="ft" id="ft" value=""/>
</div>
</div>
jsfiddle

Answer 4

You you need a display value of inline and also a given width.
#ew_field, #ft_field, #gvw_field {
text-align: center;
display: inline-block;
width: 150px; /* Adjust as needed */
}
See working demo here