Bootstrap same height cards within cols - css

Question

With Bootstrap 3.3.6 I want to make 3 cards.
<div class="row">
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
</div>
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
Now that the Dummy text is not the same length, the cards will not be the same height.
I found a trick using flexbox here: How can I make Bootstrap columns all the same height?, but this will be working on the immediate children of the .row not the .card
Another thing, even if the cards will be the same height, the buttons will not be on the same line as they will follow the the text.

Answer 1

There is no CSS property that can align items in different elements to one another...not even in flexbox.
You could always make the button be at the bottom though...that's just a matter of making the card 100% height of the equal height columns.
.row.flex {
display: flex;
}
.row.flex .col-md-4 {
float:none;
width: 33.3333%;
background: pink;
display: flex;
flex-direction: column;
}
.card {
font: 100%;
flex:1;
border:1px solid grey;
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex">
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
</div>
For some reason, this doesn't work in the Snippet but here's a Codepen.
Codepen Demo

Answer 2

You should remove your card div and set your card class with the col-md-4
And from that you can put the same height with flexbox like that
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}