A Pen by Christian Romney.

index.html

<div id="loyalty_entry">
  <div class="details nai_us container">
    <div class="row">
      <div class="col col-md-12">
        <h3>Waive the fee! AMC Stubs members lorem ipsum sit amet.</h3>
      </div>
    </div>
    
    <div class="row">
  
      <div class="col col-md-8">
        <div class="row">
          <div class="col col-md-5">
            <label id="loyaltyCodeEntryLabel">Enter AMC Stubs Number</label>
          </div>
      
          <div class="col col-md-7">
            <input class="form-control" placeholder="loyalty number" type="text" id="loyaltyCodeEntry">
          </div>        
        </div>

        <div class="row">
          <div class="col col-md-5">
            <label>Who knows what</label>
          </div>
          
          <div class="col col-md-7">
            <input class="form-control" placeholder="details" type="text" id="loyaltyCodeExtraDetail">
          </div>
        </div><!-- end loyalty extra -->
        
      </div>
      
      <div class="col col-md-4">
        <span id="addLoyaltySpan">
          <a href="#" id="addLoyalty" class="btnPurchase form-control">Apply</a>
        </span>
      </div>  
    </div>
    
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  
</div>

LDHkw.markdown

LDHkw

A Pen by Christian Romney on CodePen.

License.

style.css

#loyalty_entry * { box-sizing: border-box; }
#loyalty_entry { width: 468px; background: #efefef; padding-bottom: 10px;}

label { display: block; float: left; } /* 2ids 1 el*/
#loyaltyCodeEntry {  } /* 4 ids */

.btnPurchase { border-radius: 5px; border: 1px solid #ffa200; background: #ffb330; cursor: pointer; color: #fff; font: bold 18px/18.68px Arial, Helvetica, sans-serif; padding: 10px 25px; text-decoration: none; text-align: center;}

input { padding: 6px 12px; }
.form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
  
.container {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
  overflow: auto;
  padding-bottom: 10px;
}

.col {
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.col-md-4 {
  width: 33.3333%;
}
.col-md-5 {
  width: 41.66666667%;
}
.col-md-6 { 
  50%; 
}
.col-md-7 {
  width: 58.33333333%;
}
.col-md-8 {  
  width: 66.66667%;
}
.col-md-12 {
  width: 100%;
}