JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="articles">
    <div class="article">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptatem itaque praesentium quaerat repudiandae sed error obcaecati ex beatae dolores ut ratione hic rem ducimus adipisci magnam vitae corrupti suscipit!</p>
        <div class="caption"><a href="">Read More</a><a href="" class="share">Share</a></div>
    </div>
    <hr />
    <div class="article">
        <h3>Headline</h3>
        <p>Provident adipisci veniam ut tempora dolor quas et soluta esse!</p>
        <div class="caption"><a href="">Read More</a><a href="" class="share">Share</a></div>
    </div>
    <hr />
    <div class="article">
        <h3>Headline</h3>
        <p>Delectus aspernatur beatae unde maxime dolore corporis ab rem sed!</p>
        <div class="caption"><a href="">Read More</a><a href="" class="share">Share</a></div>
    </div>
</div>

SCSS

.articles {
    display: table;
    width: 100%;
    table-layout: fixed;
    
    .article {
        border-radius: 5px 5px 0 0;
        border-top: 5px solid #f00;
        display: table-cell;
        border-left: 1px solid;
        border-right: 1px solid;
        border-bottom: 1px solid;
        position: relative;
        padding-bottom: 40px;
    }
    
    hr {
        display: table-cell;
        border: 0;
        width: 16px;
    }
    
    .caption {
        position: absolute;
        bottom: 8px;
    }
}