1) I have two divs placed inside a larger div (container) to create small cards with information. However, I am facing an issue where if one card is taller than the other, the second card aligns itself to the bottom of the first card instead of staying at the top. Here is the code and fiddle:
<div class="main-cards">
<div class="card" style="width: 65%;">
<h1>CARD 1</h1>
<p>small</p>
<p>small</p>
<p>small</p>
</div>
<div class="card" style="width: 25%;">
<h1>CARD 2</h1>
<p>small</p>
</div>
</div>
.main-cards{
position: relative;
height: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
top: 150px;
text-align:center;
background-color: #6ab5dd;
}
.card{
display: inline-block;
background-color: white;
height: auto;
margin: 10px;
margin-top: 40px;
padding: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
FIDDLE: https://jsfiddle.net/4px7kc4v/2/
Desired Alignment: https://i.sstatic.net/kyXmm.png
2) How can I center three cards vertically in a large container while maintaining the layout shown in the image?
https://i.sstatic.net/DluZr.png
Currently facing this issue: https://jsfiddle.net/sx7ryv70/
Thank you for your time! Have a great day!