<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-xl-4">
<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
<div class="label w-100 text-right">Label</div>
<div class="description align-self-end">But I must explain to you how all this mistaken idea of denouncing pleasure and praising.</div>
</a>
</div>
<div class="col-12 col-md-6 col-xl-8">
<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
<div class="label w-100 text-right">Label</div>
<div class="description align-self-end">Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.</div>
</a>
</div>
<div class="col-12 col-xl-4">
<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
<div class="label w-100 text-right">Label</div>
<div class="description align-self-end">The several languages coalesce.</div>
</a>
</div>
<div class="col-12 col-md-6 col-xl-4">
<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
<div class="label w-100 text-right">Label</div>
<div class="description align-self-end">Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.</div>
</a>
</div>
<div class="col-12 col-md-6 col-xl-4">
<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
<div class="label w-100 text-right">Label</div>
<div class="description align-self-end">The new common language will be more simple and regular than the existing European languages.</div>
</a>
</div>
</div>
</div>
body {
margin-top: 30px;
background-color: rgba(86,61,124,.05);
}
a,
a:hover {
color: #212529;
}
a:hover {
text-decoration: none;
}
.block {
height: 350px;
background: rgba(86,61,124,.15);
margin-bottom: 30px;
}
.label {
font-size: .85rem;
font-weight: bold;
}
This Pen doesn't use any external JavaScript resources.