title: Positioning reCAPTCHA widget with CSS
body: <p>I'm trying to align the reCAPTCHA widget with my input fields, but styling .g-recaptcha doesn't seem to achieve much. Does anyone know of any selectors I can use?</p>
  
  <p>Form HTML:</p>
  
  <pre><code>&lt;div class="contact-form"&gt;
    &lt;form role="form" method="post" action="contact-form.php"&gt;
      &lt;label for="name"&gt;&lt;span&gt;Name&lt;/span&gt;&lt;input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /&gt;&lt;/label&gt;
      &lt;label for="email"&gt;&lt;span&gt;Email&lt;/span&gt;&lt;input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /&gt;&lt;/label&gt;
      &lt;label for="message"&gt;&lt;span&gt;Message&lt;/span&gt;&lt;textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."&gt;&lt;/textarea&gt;&lt;/label&gt;
      &lt;span&gt;&amp;nbsp;&lt;/span&gt;
      &lt;div id="recaptcha"&gt;
        &lt;div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;label&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;input type="submit" value="" class="submit-button" /&gt;&lt;/label&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.contact-form {
      margin: 0 auto;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 600px;
      font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
      font-size: 20px;
  }
  
  .contact-form label {
      display: block;
      margin: 0px 0px 15px 0px;
  }
  
  .contact-form label &gt; span {
      width: 100px;
      text-align: right;
      float: left;
      padding-top: 8px;
      padding-right: 20px;
  }
  
  .contact-form input, .contact-form textarea {
      margin-bottom: 15px;
      padding: 10px;
      border: none;
  }
  
  .contact-form input.input-field {
      width: 70%;
      height: 20px;
      font-size: 18px;
  }
  
  .contact-form .textarea-field {
      width: 70%;
      height: 250px;
      font-size: 18px;
  }
  
  textarea {
      resize: none;
  }
  
  textarea:focus, input:focus {
      outline: 0;
  }
  
  #recaptcha {
      width: 304px;
      margin: 0;
  }
  
  .g-recaptcha {
      text-align: left;
  }
  
  input.submit-button {
      background-image: url("../img/submit-button.jpg");
      width: 225px;
      height: 60px;
      border: none;
  }
  </code></pre>
  
  <p>Any help would be really appreciated!</p>