<section class="creditly-wrapper gray-theme">
  <h3>Credit Card</h3>
  <i>
    <div class="card-type" style="text-align:right;margin-top:10px;margin-right:10px;min-height:20px;margin-bottom:-15px"></div>
  </i>
  <div class="credit-card-wrapper">
    <div class="first-row form-group">
      <div class="col-sm-8 controls">
        <label class="control-label">Card Number</label>
        <input class="number credit-card-number form-control"
          type="text" name="number"
          pattern="\d*"
          inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number"
          placeholder="&#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149;">
      </div>
      <div class="col-sm-4 controls">
        <label class="control-label">CVV</label>
        <input class="security-code form-control"·
          inputmode="numeric"
          pattern="\d*"
          type="text" name="security-code"
          placeholder="&#149;&#149;&#149;">
      </div>
    </div>
    <div class="second-row form-group">
      <div class="col-sm-8 controls">
        <label class="control-label">Name on Card</label>
        <input class="billing-address-name form-control"
          type="text" name="name"
          placeholder="John Smith">
      </div>
      <div class="col-sm-4 controls">
        <label class="control-label">Expiration</label>
        <input class="expiration-month-and-year form-control"
          type="text" name="expiration-month-and-year"
          placeholder="MM / YY">
      </div>
    </div>
  </div>
</section>