JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<header>
    <img src="http://img158.imagevenue.com/loc910/th_59015_Britney_Spears_Unknown_Shoot_nBs_007_122_910lo.jpg" alt="" />
    <p>Britney Spears</p>
</header>

<article>
    <img src="http://img158.imagevenue.com/loc910/th_59015_Britney_Spears_Unknown_Shoot_nBs_007_122_910lo.jpg" alt="" />
    <p>Ooops I did it again...</p>
</article>

CSS

* {margin: 0px; padding: 0px;}

header img {
    display: inline-block;
}

header p {
    display: inline-block;
    font-size: 2em;
}

header {
    background: #ddd;
    margin: 10px;
}

article img {
    display: block;
}

article p {
    position: absolute;
    bottom: -5px;
    left: 165px;
    font-size: 2em;
}

article {
    position: relative;
    background: #ddd;
    margin: 10px;
}