JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="person">
    <dt>
        <a href="#">Person Name</a>
    </dt>
    <dd>Lorem ipsum dolor.</dd>
    <dd>
        <a href="#">[email protected]</a>
    </dd>
    <dd class="person-pic">
        <img src="http://lorempixel.com/80/80/cats">
    </dd>
</dl>

 <hr>
 
<dl class="short-post">
    <dt>
        <a href="#">Short Post Title</a>
    </dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat ipsum reiciendis esse asperiores voluptate omnis sequi blanditiis minima quas.</p>
    </dd>
    <dd class="post-pic">
        <img src="http://lorempixel.com/120/90/cats">
    </dd>
</dl>

SCSS

body{
    margin: 20px;
    background: #e8e9ea;
    color: #565d6c;
    font: 13px/1.7 sans-serif;
}

dl,dd{
    margin:0;
}

p{
    margin: .5em 0;
}

hr{
    margin: 50px 0;
    
}

a{
    color: inherit;
    text-decoration: none;
}

.person,
.short-post{
    position: relative;
    
    dt{
        font-weight: 700;
    }
    
    a:hover{
        text-decoration: underline;
    }
}

.person{
    padding: 0 20px 20px 100px;
    min-height: 60px;
}

.person-pic{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


.short-post{
    padding: 0 20px 20px 140px;
    min-height: 70px;
}
.post-pic{
    position: absolute;
    left: 0;
    top: 0;
}