I am attempting to align a card item to the grid. I can somewhat achieve my goal if I add vh-100 to the shorter card (product help card), but it pushes down all content too far on the page. I would ideally like for the product help card to be auto resize so that it aligns with the bottom of the NY store card. So far I've tried rearranging the HTML with different nested divs, and adding h-100 to the product help card, both outcomes have not produced my desired results.
View on codepen: https://codepen.io/jkramer25/pen/VwrLqWJ
Here is the code I am trying to work with currently:
<style>
.contact-us-editorial-icon {
display: flex;
flex-direction: row;
align-items: baseline;
}
.contact-us-editorial-icon-centered {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
}
</style>
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Contact Us</h3>
</div>
</div>
<div class="row row-cols-12 row-cols-md-10 g-4">
<!------------------------------------------------card---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card h-100">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
<path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"></path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Customer Service</h5>
<p class="card-text">At Hammacher Schlemmer we pride ourselves on superior customer service. In order to
ensure your questions are answered and your comments are heard, we offer a simple process to contact
us.</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-telephone-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
</path>
</svg>
<p class="card-text font-weight-bold"> Phone:</p>
</div>
<p class="card-text">
800-321-1484 <br />
Monday-Friday 8am - 10pm and Saturday-Sunday 8am - 8pm EST.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
<br />
We'll strive to reply within 24 hours.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-house-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
</path>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
</path>
</svg>
<p class="card-text font-weight-bold"> Address:</p>
</div>
<p class="card-text">
Hammacher Schlemmer<br />
9180 LeSaint Dr.<br />
Fairfield, OH 45014
</p>
</div>
<!--
<div class="card-footer">
<a href="#" class="btn btn-primary" onclick="s_objectID='https://ite.hammacher.com/editorial/edtest2#_13';return this.s_oc?this.s_oc(e):true">Contact
Us</a>
</div>
-->
</div>
</div>
<!------------------------------------------------card 2---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card h-100">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"></path>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Hammacher Rewards Customer Service</h5>
<p class="card-text">For inquiries regarding the Hammacher Rewards program please contact us by one of
the following methods.</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-telephone-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
</path>
</svg>
<p class="card-text font-weight-bold"> Phone:</p>
</div>
<p class="card-text">
800-203-1405 <br />
Available 24/7
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">RewardsCustomerService<br />
@HammacherRewards.com</a>
<br />
We typically respond to emails and inquiries within 24 hours.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-house-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
</path>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
</path>
</svg>
<p class="card-text font-weight-bold"> Address:</p>
</div>
<p class="card-text">
Hammacher Schlemmer Rewards<br />
PO Box 290728<br />
Wethersfield, CT 06129-0728
</p>
</div>
<!--
<div class="card-footer">
<a href="#" class="btn btn-primary" onclick="s_objectID='https://ite.hammacher.com/editorial/edtest2#_13';return this.s_oc?this.s_oc(e):true">Contact
Us</a>
</div>
-->
</div>
</div>
<!------------------------------------------------card 3---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card h-100">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694 1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z">
</path>
<path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z">
</path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Landmark New York Store</h5>
<p class="card-text">At Hammacher Schlemmer we pride ourselves on superior customer service. In order to
ensure your questions are answered and your comments are heard, we offer a simple process to contact
us.</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-bag" viewbox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"></path>
</svg>
<p class="card-text font-weight-bold"> Safe / Convenient Ways to Shop:</p>
</div>
<p class="card-text">
Toll Free: 1-800-421–9002<br />
In Person: By appointment or Walk -in (appoinments will take priority)<br />
Curbside Delivery (Convenient contactless service)
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-telephone-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
</path>
</svg>
<p class="card-text font-weight-bold"> Phone:</p>
</div>
<p class="card-text">
800-421–9002 <br />
Monday - Saturday 10am - 6pm
<br />
Closed Sunday
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
<br />
We'll strive to reply within 24 hours.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-house-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
</path>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
</path>
</svg>
<p class="card-text font-weight-bold"> Address:</p>
</div>
<p class="card-text">
147 E. 57th Street <br />
New York, NY 10022<br />
(Between Lexington and Third Ave)<br />
Open Mon - Sat 10am - 6pm, Closed Sunday<br />
<a href="https://www.google.com/maps/place/147+E+57th+St,+New+York,+NY+10022/@40.760716,-73.96863,14z/">(Hammacher Schlemmer New York Store Google Map Location)</a> <br />
<a href="https://www.google.com/maps/@40.7607064,-73.9684863,3a,75y,355.97h,95.65t/data=!3m6!1e1!3m4!1sYqOucFqLlMCaX4zkv2KgPg!2e0!7i16384!8i8192?hl=en">(Hammacher Schlemmer New York Store Google Map Location Street View)</a>
</p>
<p class="card=text" style="color: #008073; font-weight: bold;">
Our store is currently unable to accept returns. We apologize for the inconvenience.
No eating or drinking allowed and wearing a mask is mandatory.
</p>
</div>
<!--
<div class="card-footer">
<a href="#" class="btn btn-primary" onclick="s_objectID='https://ite.hammacher.com/editorial/edtest2#_13';return this.s_oc?this.s_oc(e):true">Contact
Us</a>
</div>
-->
</div>
</div>
<!------------------------------------------------card 4---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M3 2.5a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1 5 0v.006c0 .07 0 .27-.038.494H15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5V7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2.038A2.968 2.968 0 0 1 3 2.506V2.5zm1.068.5H7v-.5a1.5 1.5 0 1 0-3 0c0 .085.002.274.045.43a.522.522 0 0 0 .023.07zM9 3h2.932a.56.56 0 0 0 .023-.07c.043-.156.045-.345.045-.43a1.5 1.5 0 0 0-3 0V3zM1 4v2h6V4H1zm8 0v2h6V4H9zm5 3H9v8h4.5a.5.5 0 0 0 .5-.5V7zm-7 8V7H2v7.5a.5.5 0 0 0 .5.5H7z">
</path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Corporate Gifts & Incentives</h5>
<p class="card-text">The gift specialists in our Corporate Sales department can assist you in finding
the ideal products to fit any project and budget.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-telephone-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z">
</path>
</svg>
<p class="card-text font-weight-bold"> Phone:</p>
</div>
<p class="card-text">
1-800-321-1484
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
</p>
</div>
</div>
<!---Product HELP SECTION--->
<div class="card mt-4">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z">
</path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Product Help</h5>
<p class="card-text">Our products are among the most unique, advanced, and unexpected in the world. If
you have any questions about an item that you see on our website or in our catalog, either before or
after you have made your purchase, it can almost always be answered by any one of our Technical
Advisors.</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
<br />
An advisor will reach out to you within 24 business hours.
</p>
</div>
</div>
</div>
<!------------------------------------------------card 5---------------------------------------------------------->
<!------------------------------------------------card 6---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card h-100">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5v-11zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5H12z">
</path>
<path d="M2 3h10v2H2V3zm0 3h4v3H2V6zm0 4h4v1H2v-1zm0 2h4v1H2v-1zm5-6h2v1H7V6zm3 0h2v1h-2V6zM7 8h2v1H7V8zm3 0h2v1h-2V8zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1zm-3 2h2v1H7v-1zm3 0h2v1h-2v-1z">
</path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Press Inquiries</h5>
<p class="card-text">Since 1848, Hammacher Schlemmer has enjoyed a wealth of media coverage ranging from
print publications to TV talk shows. If you are interested in promoting, demonstrating, blogging, or
video taping any of our products, please contact one of our Public Relations Specialists to learn
more and begin the process.</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-house-fill" viewbox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
</path>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
</path>
</svg>
<p class="card-text font-weight-bold"> Address:</p>
</div>
<p class="card-text">
Hammacher Schlemmer<br />
9307 N. Milwaukee Ave.<br />
Niles, IL 60714
</p>
</div>
<!--
<div class="card-footer">
<a href="#" class="btn btn-primary" onclick="s_objectID='https://ite.hammacher.com/editorial/edtest2#_13';return this.s_oc?this.s_oc(e):true">Contact
Us</a>
</div>
-->
</div>
</div>
<!------------------------------------------------card 7---------------------------------------------------------->
<div class="col-lg-6 mb-4">
<div class="card h-100">
<svg class="card-img-top pt-4" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#008073" viewbox="0 0 16 16">
<path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z"></path>
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path>
</svg>
<div class="card-body">
<h5 class="card-title font-weight-bold">Vendors, Manufacturers and Inventors</h5>
<p class="card-text">
We invite all inventors who have a product in hand to contact us. Hammacher Schlemmer will always
listen to those dreamers, explorers and philosophers who wish to improve the world one idea at a
time.
</p>
<div class="contact-us-editorial-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#008073" class="bi bi-envelope-fill" viewbox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z">
</path>
</svg>
<p class="card-text font-weight-bold"> Email:</p>
</div>
<p class="card-text">
<a href="mailto:[email protected]" tabindex="4" onclick="s_objectID='mailto:[email protected]_1';return this.s_oc?this.s_oc(e):true">[email protected]</a>
</p>
</div>
<!--
<div class="card-footer">
<a href="#" class="btn btn-primary" onclick="s_objectID='https://ite.hammacher.com/editorial/edtest2#_13';return this.s_oc?this.s_oc(e):true">Contact
Us</a>
</div>
-->
</div>
</div>
<!--Information 1--------------------------------------------------------->
<div style="padding-left: 15px;">
<h5 style="font-weight: bold;">Accessibility at Hammacher Schlemmer</h5>
<p>
Hammacher Schlemmer's goal is to offer a great customer experience. In defining a great customer experience
for our customers with disabilities, we are committed to removing barriers and providing alternative ways to
access our Customer Service Center.
</p>
</div>
<!--Information 2---------------------------------------------------------->
<div style="padding-left: 15px;">
<h5 style="font-weight: bold;">Telecommunications Relay Services (TRS)</h5>
<p>
We accept calls made via Telecommunications Relay Service (TRS). This type of service allows for two-way
communications for those with hearing or speech disabilities. This service is free and available 24 hours a
day by dialing #711.
</p>
<p>
We also provide additional assistance for our customers with Visual Impairment or other disabilities. If you
are visually impaired or if you have a different type of disability and you need assistance in accessing our
website, please contact us by calling 1-800-395-7006 and asking for accessibility assistance.
</p>
</div>
</div>
<!-- JAVASCRIPT
<script>...</script>
-->
I would recommend you to define a grid on elements, where you have multiple cards inside that should be evenly aligned.
Apply this style to your cell with Corporate Gifts & Incentives and Product Help and the elements are aligned as desired (verified with your codepen).
display: grid;
grid-template-rows: 1fr 1fr;
grid-row-gap: 1rem;
Alternatively, you could use flex layout as well, but personally, I prefer grid-based solutions for such cases.