I'm looking to bring this idea to life:
https://i.sstatic.net/SWytj.png
Most of my work is complete, but I need the boxes to fill up all available space in the row.
This is the HTML code I've used with Bootstrap. How can I achieve this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d819d81">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="row gx-2 margin">
<div class="col-md-4">
<div class="bg-gray padding-box">
<p><span class="fw-bold mb-1">"I needed a lawyer to do my will</span> and through CMCs EAP | found a great one that was very professional!”</p>
</div>
<div class="bg-gray padding-box mt-2">
<p class="fw-bold mb-1">
“I bought a new exercise bike and since we now have the Lifestyle benefit, I am eligible for $500 of the cost to be paid back to me. Simple process to get reimbursed!”
</p>
</div>
<div class="bg-gray padding-box mt-2">
<p class="fw-bold mb-1">
"The annual physical was especially life saving this year because my doctor did a full blood panel and found that my potassium and magnesium were extremely low which could have been a very serious situation. The fact that the visit is free is a plus!”
</p>
</div>
</div>
<div class="col-md-8">
<div class="row gx-2">
<div class="col-md-6">
<div class="bg-gray padding-box">
<p class="fw-bold mb-1">
"I found MDLive to be very easy to use and very convenient - especially when you're sick and it's the weekend when most doctor's offices are closed. It's also really nice to have when you are out of town and not familiar with the area or doctors where
you are."
</p>
</div>
<div class="bg-gray padding-box mt-2">
<p class="fw-bold mb-1">
"With the new Lifestyle benefit, I bought a rower! From not being active for a few years I'm now rowing 3-4 times per week and love it."
</p>
</div>
</div>
<div class="col-md-6">
<div class="bg-gray padding-box">
<p class="fw-bold mb-1">
"The 401k and ESPP are awesome because CMC matches which makes me feel that the company cares about our future. It's a very simple & easy process to sign up!”
</p>
</div>
<div class="bg-gray padding-box mt-2">
<p class="fw-bold mb-1">
"MD live has been great! Especially with COVID not wanting to go to a doctor office; you call, and the appointment is done right away. They have treated my issues with great results."
</p>
</div>
</div>
</div>
<div class="bg-gray padding-box mt-2">
<p class="fw-bold mb-1">
"I have been extremely happy with the international pharmacy. I talk it up to any employee I hear who is complaining about the cost of their expensive prescriptions. I've saved enough on one prescription to actually pay for my health insurance for the
entire year. If that isn't amazing, I don't know what is!”
</p>
</div>
</div>
</div>
</div>
The implementation from the code appears as shown in image 1. I just need to remove the excess white space between the gray containers. My goal is to have the gray containers expand to fill the extra space while leaving a margin.