title: How to position label tags in relevance to the input fields
body: <p>I am having a problem sorting this one out.  </p>
  
  <p>here's my html</p>
  
  <pre><code>&lt;form&gt;
      &lt;p&gt;&lt;label for="comp-name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" name="comp-name"&gt;&lt;/input&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="company-address"&gt;Address:&lt;/label&gt;
          &lt;textarea name="company-address"&gt;&lt;/textarea&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="postcode"&gt;Postcode:&lt;/label&gt;
          &lt;input type="text" name="postcode"&gt;&lt;/input&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="phone"&gt;Phone Number:&lt;/label&gt;
          &lt;input type="text" name="phone"&gt;&lt;/input&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="email"&gt;Email:&lt;/label&gt;
          &lt;input type="text" name="email"&gt;&lt;/input&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>here is what I want the form to look like:
  <img src="https://i.stack.imgur.com/yOvfl.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/N7e67/" rel="nofollow noreferrer">here is the jsfiddle link.</a></p>
  
  <p>having hard time figuring out how to place the label on the top-left part of the input/textarea.</p>