There are a multiple ways you could do it. Here are a couple examples:
Example One:
<ul>
<li>
<label for="color">Color:</label>
<input id="color" type="text" value="color" />
</li>
<li>
<label for="date">Date:</label>
<input id="date" type="text" value="date" />
</li>
</ul>
CSS: (very little css needed)
ul {
padding:0;
margin:0;
list-style:none;
}
label {
width:40px;
display:inline-block;
}
Example 2:
And another way with no CSS(Let the browser do the work)
<div>
<label for="date">Date:</label>
<input id="date" type="text" value="date" />
</div>
<div>
<label for="date">Color:</label>
<input id="date" type="text" value="color" />
</div>
note:
To get the fields to align you will need to add a width to the labels (like example 1). However this (imo) is a simpler / more semantic way to code the HTML in order to force line breaks after each "label input group". See With CSS
This format is most similar to Bootstrap which I prefer, seems most semantic in most cases. However that depends on content / data. http://getbootstrap.com/css/#forms