<div class="cards">
<div class="card">
<div class="card__header">
<h2 class="card__title">Lorem, ipsum dolor.</h2>
</div>
<div class="card__body">
<p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae itaque, voluptate consectetur asperiores accusamus illo perspiciatis, temporibus error voluptatibus esse est ad eos debitis aspernatur illum autem, harum minus ratione.</p>
<p class="card__text">Consectetur ipsum architecto obcaecati quo soluta, corporis officiis ratione ut quod magni atque similique, at omnis! Eveniet veniam id quo laboriosam, sed quaerat nobis. Eaque quo dolores dolor unde aliquam.</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h2 class="card__title">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
</div>
<div class="card__body">
<p class="card__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam distinctio eos, voluptates dicta assumenda, libero accusantium nemo totam, quisquam corrupti fugiat? Vitae unde amet ratione vel incidunt nobis accusamus nulla.</p>
<p class="card__text">Provident, voluptate magnam! Consectetur, atque! Labore, quam veritatis aliquid quidem voluptatum sit sed! Eveniet quisquam expedita quos? Illum, sequi possimus. Esse totam voluptates, et optio perferendis assumenda perspiciatis similique dolores?</p>
<p class="card__text">Modi accusantium numquam nam. Maiores nulla dignissimos deleniti, sunt cum adipisci ad autem alias aperiam repudiandae libero, facere dolores a velit, ratione et vero esse soluta. Quo nesciunt debitis omnis?</p>
</div>
</div>
</div>
body {
margin: 0;
padding: 32px;
font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}
.cards {
display: flex;
}
.card {
margin: 16px;
flex: 1 1 50%;
display: flex;
flex-direction: column;
&__header {
padding: 16px;
flex: 0 0 auto;
}
&__title {
margin: 0;
font-weight: 500;
}
&__body {
padding: 8px 16px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
&__text {
margin: 8px 0;
line-height: 1.5;
}
}
.cards {
* {
outline: 1px dashed #888888;
&:hover {
position: relative;
outline: 2px solid #222222;
&::after {
position: absolute;
top: 0;
left: 0;
padding: 2px 4px;
font-size: 14px;
font-weight: 400;
line-height: 1;
background: #333333;
color: #ffffff;
content: attr(class);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.