JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="story-block">
    <h4 class="heading">
        <a href="" class="prm prm-story">Monaco royals deny pre-wedding rift</a>
    </h4>
    <a href="" class="prm prm-story thumb-link">
        <img src="http://placehold.it/61x46" alt="" class="thumbnail">
    </a>
    <p class="standfirst">
        <span class="article-info">
            <em class="byline">John Grey</em>
        </span> 
        NEWLYWEDS Prince Albert II and Princess Charlene of Monaco have embarked on their honeymoon, as her father dismissed reports of a pre-wedding rift.
    </p>
</div>

CSS

.story-block {
    background:#ffd100;
    min-height: 56px;
    position: relative;
    min-height: 75px;
    overflow: hidden;
    padding: 0.5em;
    position: relative;
    clear: left;
}
.story-block .heading {
    position: absolute;
    left: 96px;
    margin: 0 1em 0 0;
    font-size: larger;
    line-height: 0.8;
}
.story-block .thumb-link {
    height: 56px;
    float: left;
    margin: 0 0.5em 0 0;
    width: 75px;
}
.story-block img {
    height: 56px;
    width: auto;
}
.story-block .standfirst, .story-block .standfirst .article-info {
    display: block;
    font-size: 0;
    margin: 0;
    text-indent: -9000px;
}