more

src/Components/Modals/PaymentModal.js

@@ -109,6 +109,11 @@ const PaymentModal = ({
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (
               <Row key={`row${j}-modal`}>
+                {j === 2 ? (
+                  <div className="exp-date-hearder">Card Expiration Date</div>
+                ) : (
+                  <></>
+                )}
                 {names.map((name, i) => (
                   <Col
                     key={`${name}${i + fieldsChunkSize * j}-modal`}

src/styles/modals.scss

@@ -118,6 +118,13 @@
 
 .short-column {
   max-width: 120px !important;
-  margin-right: 1.4rem;
+  margin-right: 2.3rem;
   margin-bottom: 1rem;
 }
+
+.exp-date-hearder {
+  margin-top: -14px;
+  margin-bottom: 9px;
+  margin-left: 13px;
+  padding-left: 7px;
+}

src/styles/text-input.scss

@@ -13,9 +13,9 @@
 }
 
 .skinny-input {
-  width: 120px;
+  width: 140px;
 }
 
 .skinny-column {
-  width: 120px !important;
+  width: 140px !important;
 }