title: Align checkbox and label
body: <p>I have a form which code looks like this:</p>
  
  <pre><code>&lt;div id="right_sidebar"&gt;
  
  &lt;form id="your_name" name="your_name" action="#" method="post" style="display: block; "&gt; 
      &lt;fieldset&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" name="name" id="name" value=""&gt;
          &lt;label for="lastname"&gt;Last Name&lt;/label&gt;
          &lt;input type="text" name="lastname" id="lastname"&gt;
                  &lt;label for="msg"&gt;&lt;a href="#" rel="nofollow" id="msg_toggle"&gt;Comment &lt;span class="sp"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/label&gt;
          &lt;textarea name="msg" id="msg" rows="7"&gt;&lt;/textarea&gt;
          &lt;input type="checkbox" name="agree"&gt;
          &lt;label for="agree"&gt;Accept the terms&lt;/label&gt;
                  &lt;button class="blue_button" type="submit"&gt;Send&lt;/button&gt;
      &lt;/fieldset&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;​
  </code></pre>
  
  <p>And which is styled with the following CSS:</p>
  
  <pre><code>body {
  color: #333;
  font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
  }
  
  #right_sidebar {
  padding-top: 12px;
  width: 190px;
  position:relative;
  }
  
  form {
  background: #EEF4F7;
  border: solid red;
  border-width: 1px 0;
  display: block;
  margin-top: 10px;
  padding: 10px;
  }
  
  form label {
  color: #435E66;
      display:block;
  font-size: 12px;
      }
  
  form textarea {
  border: 1px solid #ABBBBE;
  margin-bottom: 10px;
  padding: 4px 3px;
  width: 160px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  }
  form label a {
  display: block;
  padding-left: 10px;
  position: relative;
  text-decoration: underline;
  }
  
  
  form label a .sp {
  background: #EEF4F7;
  height: 0;
  left: 0;
  position: absolute;
  top: 2px;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #333;
  }
  
  form button.blue_button {
  margin-top: 10px;
  vertical-align: top;
  }
  
  button.blue_button{
  color: white;
  font-size: 12px;
  height: 22px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  }
  button.blue_button {
  background-color: #76C8C6;
  border: 1px solid #7798B7;
  text-shadow: 1px 1px 0px #567C9E;
  }
  </code></pre>
  
  <p>​As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.</p>
  
  <p>How could I do both?</p>
  
  <p>You can see it live here: <a href="http://jsfiddle.net/Nwmkk/" rel="noreferrer">form, checkbox failing</a></p>