Align divs on top while they're aligned also on left - html

Question

1)
I've got 2 divs, placed in 1 big div (container for them). They're supposed to be like small cards with informations. Here, I have a problem. When I have 2 cards next to each other and one card is simply higher, second one moves like it's aligned to bottom of 1st card, but I want to have it aligned allways on top (here is a 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/
How I want it:
2)
How could I do 3 cards vertically centered in one big container to center, but in this layout? (look at img)
Because I have this problem: https://jsfiddle.net/sx7ryv70/
Thanks for everyone's time! Have a nice day!

Answer 1

1)
Add this to the css of the cards:
vertical-align: top;
2) Having div's as inline-blocks force them to be on the same 'row' as if they are huge text characters. Try fitting the smaller cards together in their own container.

Answer 2

Add vertical-align: top; to .card

Answer 3

Your solutions:
[link](https://jsfiddle.net/Atula/4px7kc4v/3/)
[link](https://jsfiddle.net/Atula/sx7ryv70/1/)

Answer 4

Here look at this JSfiddle
HTML
<div class="main-cards">
<div class="card" style="width: 55%; height: 300px; float:left;"></div>
<div class="card" style="width: 55%; height: 300px; margin-top: 50px; float: left;"></div>
<div class="card" style="width: 25%; height: 650px;"></div>
CSS
.main-cards {
position: relative;
height: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
top: 50px;
text-align: center;
background-color: #6ab5dd;
padding: 30px;
}
.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);
}
All you need to remember is the floating principle.