Document

Card Information
Card Number
Expiry Date
Enter CCV
Card Holder
First Name
Last Name
Phone
Billing Address
Address
City
Zip/Postal
State/Province
Country
        
<div class="card-information">
      <div class="row col-custom-padding">
         <div class="col-md-6">
            <div class="card-info-heading">Card Information</div>
            <div class="row col-custom-padding">
               <div class="col-md-6">
                  <label>Card Number</label>
                  <div class="search-input-col">
                     <img class="visa-img" src="images/visa.png">                  
                     <input type="text" value="4062 3143 2637 3837" class="form-control" readonly="">
                  </div>
               </div>
               <div class="col-md-6">
                  <div class="row col-custom-padding">
                     <div class="col-md-8">
                        <label>Expiry Date</label>
                        <div class="clearfix"></div>
                        <div class="expiry-yearTxt">
                           <div class="search-input-col">
                              <input type="text" value="07" class="form-control" readonly="">
                           </div>
                           <div class="search-input-col ml-1">
                              <input type="text" value="2023" class="form-control" readonly="">
                           </div>
                        </div>
                     </div>
                     <div class="col-md-4">
                        <label>Enter CCV</label>
                        <div class="search-input-col">
                           <input type="text" value="xxx" class="form-control" readonly="">
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="card-info-heading mt-3">Card Holder</div>
            <div class="row col-custom-padding">
               <div class="col-md-6 mb-2">
                  <label>First Name</label>
                  <div class="search-input-col">
                     <i class="icon-cross" style="display: none;"></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="Richard">
                  </div>
               </div>
               <div class="col-md-6 mb-2">
                  <label>Last Name</label>
                  <div class="search-input-col">
                     <i class="icon-cross" style="display: none;"></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="Guo">
                  </div>
               </div>
               <div class="col-md-6">
                  <label>Phone</label>
                  <div class="search-input-col">
                     <i class="icon-cross" style="display: none;"></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="+1 7711234567">
                  </div>
               </div>
               <div class="col-md-6">
                  <label>Email</label>
                  <div class="search-input-col">
                     <i class="icon-cross" style="display: none;"></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="richard@synnex.com">
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="card-info-heading">Billing Address</div>
            <div class="row col-custom-padding">
               <div class="col-md-6 mb-2">
                  <label>Address</label>
                  <div class="search-input-col whiteBg">
                     <i class="icon-cross" style=""></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="300 Rock RD">
                  </div>
               </div>
               <div class="col-md-6 mb-2">
                  <div class="row col-custom-padding">
                     <div class="col-md-6">
                        <label>City </label>
                        <div class="search-input-col">
                           <i class="icon-cross" style="display: none;"></i>
                           <input type="text" class="form-control form-control-padding cust-po" value="Greer">
                        </div>
                     </div>
                     <div class="col-md-6">
                        <label>Zip/Postal</label>
                        <div class="search-input-col">
                           <i class="icon-cross" style="display: none;"></i>
                           <input type="text" class="form-control form-control-padding cust-po" value="29651">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-6">
                  <label>State/Province</label>
                  <div class="search-input-col whiteBg">
                     <i class="icon-cross" style=""></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="South Carolina">
                  </div>
               </div>
               <div class="col-md-6">
                  <label>Country</label>
                  <div class="search-input-col whiteBg">
                     <i class="icon-cross" style=""></i>
                     <input type="text" class="form-control form-control-padding cust-po" value="United States">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="flyout-footer">
               <input type="button" class="btn btn-outline ml-auto" value="Cancel"><input type="button" class="btn btn-primary ml-2" value="Save">
            </div>
         </div>
      </div>
</div>