title: How do I shift the text to the right of the checkbox in CSS?
body: <p>I'm having a little trouble shift the text "I agree to everything that will happen after I submit this form. Take All my data!" to the right of the checkbox and have the checkbox in line with the other text on the left-hand side. The code is in the codepen link below, any input would be greatly appreciated!</p>
  
  <p><a href="https://codepen.io/Hollow27/pen/qKyOKZ/" rel="nofollow noreferrer">Sign in form below</a></p>
  
  <p>HTML Below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;form&gt;
    &lt;h1&gt;Sign up for the newsletter&lt;/h1&gt;
  
    &lt;body&gt;
      &lt;br&gt;&lt;/br&gt;
      &lt;p&gt;
        &lt;label for="name"&gt;Name&lt;/label&gt;
        &lt;input id="name" name="Name" type="text"&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;input id="email" name="Email" type="email"&gt;
      &lt;/p&gt;
  
      &lt;label&gt;
    &lt;input type="checkbox" value="true" /&gt;I agree to everything that will happen after I submit this form. Take All my data!&lt;/label&gt;
  
      &lt;br&gt;&lt;/br&gt;
      &lt;p&gt;
        &lt;input type="submit" value="SUBMIT" id="submit"&gt;
      &lt;/p&gt;
    &lt;/body&gt;
  &lt;/form&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"&gt;
  &lt;/script&gt;
  
  &lt;script src="js/app.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Below:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Varela+Round');    
  @import url('https://fonts.googleapis.com/css?family=Raleway:500');
  
  
  form {
    background: #fff;
    padding: 4em 4em 2em;
    max-width: 420px;
    margin: 100px auto 0;
    box-shadow: 0 0 1em #222;
    border-radius: 9px;
    position: relative;
  }
  
  
  h1 {
    font-size: 15px;
    font-weight: bold;
    font-color: black;
    font-family: 'Varela Round', sans-serif;
  }
  
  
  body {
    font-size: 7px;
    background: #d7d7d7; /* fallback */
    font-family: 'Raleway', sans-serif;
  }
  
  p {
    margin: 0 0 3em 0;
    position: relative;
  }
  
  label {
    display: block;
    font-size: 1.6em;
    margin: 0 0 1em;
    color: #333;
  }
  
  input {
    display: block;
    margin: auto;
    box-sizing: border-box;
    width: 100%;
    outline: none
  }
  
  input[type="text"],
  input[type="email"] {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    font-size: 1.6em;
    padding: .8em .5em;
    border-radius: 5px;
  }
  
  input[type="text"]:focus,
  input[type="email"]:focus {
    background: #fff
  }
  
  input[type="submit"] {
    font-family: 'Varela Round', sans-serif;
    background: #f45226;
    border-radius: 8px;
    font-weight: bold;
    width: 30%;
    border: none;
    color: #fefefe;
    cursor: pointer;
    display: block;
    font-size: 1.6em;
    line-height: 2em;
    margin: auto;
    outline: none;
    padding: 8px;
    letter-spacing: 1px;
    text-shadow: 0 1px #f45226;
    box-shadow: 0px 4px 8px rgba(165, 126, 157, 0.62);
  }
  
  input[type="submit"]:active {
    top: 1px;
    outline: none;
    box-shadow: none;
  }
  
  label[type="checkbox"] {
      display: block;
      padding-left: 20px;
  }
  
  input[type="checkbox"] {
      margin-left: -20px;
  }
  </code></pre>