<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.