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:

here is the jsfiddle link.

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/

Answer 2

You can just put the labels in the left column of a table and the fields in the right, then position them within their cells

<table>
    <tr>
        <td>(label)</td>
        <td>(input)</td>
    </tr>
    ...
</table>