I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I've coded this up without responsiveness but I am struggling to get a responsive card. Any help is great, thank you!
JSFiddle:https://jsfiddle.net/brax/2o01k7ps/
.alignment2 { display: flex; justify-content: space-between; column-gap: 20px; padding-bottom: 6%;}.container { padding: 2px 16px;}.card2 { box-shadow: 0 5px 13px 0 #000; border-radius: 15px; background-color: #121212; border-color: #121212; height: 188px;}.card2:hover { box-shadow: 0 8px 16px 0 000;}.card2 img { width: 50%; float: left; border-radius: 15px 0px 0px 15px; margin-right: 20px; display: inline;}.card2 h3 { display: inline;}.card2 h4 { display: inline; font-size: 24px; color: white;}.card2 p { display: inline; font-size: 18px; color: white; padding-top: 20px;}.card2 .link-a { display: inline; margin-top: 35px; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none;}<div class="alignment2"><div class="card2"><img src="https://dummyimage.com/300x300" alt="Avatar"><div class="container"><h4>Lorem Ipsum</h4><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p><br><br><p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p></div></div><div class="card2"><img src="https://dummyimage.com/300x300" alt="Avatar"><div class="container"><h4>Lorem Ipsum</h4><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p><br><br><p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p></div></div></div>Image 1
Image 2
