How can I get the label to stay at the top of the select element?

Question

With this html:

<h2>Where (Location / Station)</h2>
<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
  <option value="linecook">Line cook</option>
  <option value="barrista">Barrista</option>
  <option value="securityguard">Security Guard</option>
  <option value="fignipper">Nipper of Figs</option>
</select>

My label drops to the bottom of the select element:

I want it at the top, instead. What html or CSS do I need for that?

Answer 1

Just use vertical-align:top:

label {
  vertical-align: top;
}

<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
  <option value="linecook">Line cook</option>
  <option value="barrista">Barrista</option>
  <option value="securityguard">Security Guard</option>
  <option value="fignipper">Nipper of Figs</option>
</select>