How to stretch cards to fill entire div with HTML/CSS?

I've created two cards on a site I am building. I would like them to span the entire div but I cannot get them to span the width without their size being giant. Ideally, I would like to make the cards shorter height and longer width to span the div. The first image below is what I have now, the second image is what I would like it to become. The current code that I have for this area follows. Any insight is helpful, thanks! .alignment { display: flex; justify-content: space-between; column-gap: 2%; padding-bottom: 6%; } .container { padding: 2px 16px; height: 20%; width: 100%; } .card { /* Add shadows to create the "card" effect */ box-shadow: 0 5px 13px 0 #000; border-radius: 15px; background-color: #121212; border-color: #121212; flex-grow: -1; width: 30%; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 000; } .card img { border-radius: 15px 15px 0px 0px; } .card h3 { padding-top: 30px; } .card h4 { padding-top: 20px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(1) > div > h4 { text-align: left; font-size: 28px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(1) > div > p { text-align: left; font-size: 18px; } #content > div.news > div.alignment.show > div:nth-child(2) > div > h4 { text-align: left; font-size: 28px; margin-bottom: 24px; } #content > div.news > div.alignment.show > div:nth-child(2) > div > p { text-align: left; font-size: 18px; } .card p { margin-top: -8px; } .card .link-a { margin-bottom: 16px; } Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. CTA Link Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. CTA Link Current Display: Future Display: