How to position label tags in relevance to the input fields

Question

I am having a problem sorting this one out.

Here's my HTML

<form>
  <p><label for="comp-name">Name:</label>
    <input type="text" name="comp-name"></input>
  </p>
  <p>
    <label for="company-address">Address:</label>
    <textarea name="company-address"></textarea>
  </p>
  <p>
    <label for="postcode">Postcode:</label>
    <input type="text" name="postcode"></input>
  </p>
  <p>
    <label for="phone">Phone Number:</label>
    <input type="text" name="phone"></input>
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="text" name="email"></input>
  </p>
</form>

Here is what I want the form to look like:

I'm having hard time figuring out how to place the label on the top-left part of the input/textarea.

Answer 1

If I understand correctly, a simple:

label {
    vertical-align: top;
}

should give you the results you want.

Fiddle: http://jsfiddle.net/N7e67/2/