如何对齐这些嵌套的 bootstrap 卡片？
How to align these nested bootstrap cards?
我正在尝试将卡片项目与网格对齐。如果我将 vh-100 添加到较短的卡片（产品帮助卡片）中，我可以在一定程度上实现我的目标，但它会将页面上的所有内容推得太远。理想情况下，我希望产品帮助卡能够自动调整大小，以便它与纽约商店卡的底部对齐。到目前为止，我已经尝试用不同的嵌套 div 重新排列 HTML，并将 h-100 添加到产品帮助卡中，这两种结果都没有产生我想要的结果。
在codepen上查看：
https://codepen.io/jkramer25/pen/VwrLqWJ
这是我目前正在尝试使用的代码：
<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:customerservice@hammacher.com" tabindex="4" onclick="s_objectID='mailto:customerservice@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CustomerService@hammacher.com</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:RewardsCustomerService@HammacherRewards.com" tabindex="4" onclick="s_objectID='mailto:RewardsCustomerService@HammacherRewards.com_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:customerservice@hammacher.com" tabindex="4" onclick="s_objectID='mailto:customerservice@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CustomerService@hammacher.com</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:CorporateOrders@hammacher.com" tabindex="4" onclick="s_objectID='mailto:CorporateOrders@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CorporateOrders@hammacher.com</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:Tech@hammacher.com" tabindex="4" onclick="s_objectID='mailto:Tech@hammacher.com_1';return this.s_oc?this.s_oc(e):true">Tech@hammacher.com</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:PR@hammacher.com" tabindex="4" onclick="s_objectID='mailto:PR@hammacher.com_1';return this.s_oc?this.s_oc(e):true">PR@hammacher.com</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:Buyer@hammacher.com" tabindex="4" onclick="s_objectID='mailto:Buyer@hammacher.com_1';return this.s_oc?this.s_oc(e):true">Buyer@hammacher.com</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>
-->
我建议您在元素上定义一个 grid，其中有多张卡片应该均匀对齐。
使用 Corporate Gifts & Incentives 和 Product Help 将此样式应用于您的单元格，并且元素按需要对齐（已使用您的代码笔验证）。
display: grid;
grid-template-rows: 1fr 1fr;
grid-row-gap: 1rem;
或者，您也可以使用 flex 布局，但就我个人而言，对于这种情况，我更喜欢 grid-based 解决方案。
我正在尝试将卡片项目与网格对齐。如果我将 vh-100 添加到较短的卡片（产品帮助卡片）中，我可以在一定程度上实现我的目标，但它会将页面上的所有内容推得太远。理想情况下，我希望产品帮助卡能够自动调整大小，以便它与纽约商店卡的底部对齐。到目前为止，我已经尝试用不同的嵌套 div 重新排列 HTML，并将 h-100 添加到产品帮助卡中，这两种结果都没有产生我想要的结果。
在codepen上查看： https://codepen.io/jkramer25/pen/VwrLqWJ
这是我目前正在尝试使用的代码：
<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:customerservice@hammacher.com" tabindex="4" onclick="s_objectID='mailto:customerservice@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CustomerService@hammacher.com</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:RewardsCustomerService@HammacherRewards.com" tabindex="4" onclick="s_objectID='mailto:RewardsCustomerService@HammacherRewards.com_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:customerservice@hammacher.com" tabindex="4" onclick="s_objectID='mailto:customerservice@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CustomerService@hammacher.com</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:CorporateOrders@hammacher.com" tabindex="4" onclick="s_objectID='mailto:CorporateOrders@hammacher.com_1';return this.s_oc?this.s_oc(e):true">CorporateOrders@hammacher.com</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:Tech@hammacher.com" tabindex="4" onclick="s_objectID='mailto:Tech@hammacher.com_1';return this.s_oc?this.s_oc(e):true">Tech@hammacher.com</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:PR@hammacher.com" tabindex="4" onclick="s_objectID='mailto:PR@hammacher.com_1';return this.s_oc?this.s_oc(e):true">PR@hammacher.com</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:Buyer@hammacher.com" tabindex="4" onclick="s_objectID='mailto:Buyer@hammacher.com_1';return this.s_oc?this.s_oc(e):true">Buyer@hammacher.com</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>
-->
我建议您在元素上定义一个 grid，其中有多张卡片应该均匀对齐。
使用 Corporate Gifts & Incentives 和 Product Help 将此样式应用于您的单元格，并且元素按需要对齐（已使用您的代码笔验证）。
display: grid;
grid-template-rows: 1fr 1fr;
grid-row-gap: 1rem;
或者，您也可以使用 flex 布局，但就我个人而言，对于这种情况，我更喜欢 grid-based 解决方案。