Align two buttons at the bottom
<p>I am using Bootstrap 4's <a href="http://v4-alpha.getbootstrap.com/components/card/#groups" rel="nofollow noreferrer">card groups</a>. I want to align both buttons at the same line which should be at bottom of the .card. </p>

<p><a href="https://i.stack.imgur.com/uIdoe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uIdoe.png" alt="enter image description here"></a></p>

<p>The <a href="https://jsfiddle.net/44Lnjj8d/4/" rel="nofollow noreferrer"><strong>jsfiddle</strong></a>.</p>

<p>I tried</p>

<pre><code>.card {
  position: relative;
}

.btn {
  position: relative;    // &lt;- if I use absolute here, it will be ugly
  bottom: 0;
}
</code></pre>

<p>and also</p>

<pre><code>.card {
  display: table;
}

.btn {
  display: table-cell;
  vertical-align: bottom;
}
</code></pre>

<p>But neither works.</p>