I have a problem with aligning Bootstrap cards body - with the buttons and text inside them to make them at the same height.
<div class="card mb-4 shadow-sm d-inline-block">
<div class="card-header">
<h4 class="my-0 font-weight-normal">A</h4>
</div>
<div class="card-body">
<span>
One line text
</span>
<h1 class="mt-3 card-title pricing-card-title">€0</h1>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="fas fa-check"></i> Web page</li>
<li class="mb-2"><i class="fas fa-sync"></i> AAA</li>
<li><i class="fas fa-check"></i> XXX</li>
<li><i class="fas fa-check"></i> CCC</li>
</ul>
<small class="text-muted">
* - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
</small>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
<div class="card mb-4 shadow-sm d-inline-block">
<div class="card-header">
<h4 class="my-0 font-weight-normal">H</h4>
</div>
<div class="card-body">
<span>
Two line text Two line text Two line text Two line text Two line text
</span>
<h1 class="mt-3 card-title pricing-card-title">€0</h1>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="fas fa-check"></i> Web page</li>
<li class="mb-2"><i class="fas fa-sync"></i> JJJ</li>
<li><i class="fas fa-check"></i> XXX</li>
<li><i class="fas fa-check"></i> CCC</li>
</ul>
<small class="text-muted">
* - Revisions are how many times you can request a change of something, you can read more at <a href="revision-policy">revision policy</a>
</small>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
This is JSFiddle link so you can see the whole code etc. JSFiddle