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; }<div class="alignment"><div class="card"><img src="image.png" alt="Avatar"><div class="container"><!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> --><h4>Lorem Ipsum</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p></div></div><div class="card"><img src="image.png" alt="Avatar" style=""><div class="container"><!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> --><h4>Lorem Ipsum</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p></div></div></div>Current Display:
Future Display: