Put text in line with top of select box - html

Question

I want to have my text in line with the top of the multiple select box, but it defaults to the bottom. How can I do this? I was also wondering why it defaults to the bottom, I would have thought it would be more common to have it at the top, ie. A label that describes what is in the select box.
HTML:
<div>
<label>
<span>Choose multiple options: </span>
<select name="options" multiple>
<option value="all">ALL</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<span>Choose file: </span> <input type="file"></input>
</label>
</div>
FIDDLE

Answer 1

Add this to your CSS:
span, input {
vertical-align: top;
}
DEMO

Answer 2

Get rid of the display: block; on your labels and the widths of both li and label and it works.
ul {
width: 100%;
background-color: #ccc;
}
li {
padding-top: 6px;
display: inline-block;
}
label {
float: left;
text-align: right;
}

Answer 3

First add an id to the span as below:
<span id="top">Choose multiple options: </span>
then add CSS:
#top{
vertical-align: top;
}

Answer 4

There are a CSS property vertical-align: top;.
Try with this :
span, input{
vertical-align: top;
}
Try in fiddle

Answer 5

you can use table as the following
html :
<div>
<table width="500" cellpadding="5" cellspacing="5">
<tr>
<td align="left" width="250" valign="top">
<span>Choose multiple options: </span>
</td>
<td align="left" width="250" valign="top">
<select name="options" multiple="multiple">
<option value="all">ALL</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</td>
</tr>
<tr>
<td align="left" width="250" valign="top">
<span>Choose file: </span>
</td>
<td align="left" width="250" valign="top">
<input type="file"></input>
</td>
</tr>
</table>
</div>
table have aproperty valign="top" it will help you