JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<ul>
    <li>
        <img src="http://placehold.it/48x48"/>
        <div>
            <h1>Test Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet porttitor nibh, vel imperdiet odio. Phasellus dolor orci, pellentesque et elementum nec, semper id tellus. Fusce congue in sem a egestas. Proin semper dapibus viverra. Morbi interdum dignissim nunc. Proin aliquam vehicula leo, eget dapibus dui porta a. Curabitur sit amet tincidunt nulla. Ut venenatis non leo quis varius. Aliquam rutrum tempor est et euismod. Vivamus imperdiet euismod dignissim. Proin sed mauris et risus ultricies tempor sit amet nec metus. Quisque sed erat eu eros molestie vestibulum ac sit amet augue. Maecenas eget mauris eget nisl feugiat feugiat. Morbi pretium quam vitae tempus eleifend.</p>
        </div>
    </li>
</ul>

CSS

li {
    border: 1px solid #ccc;
    position: relative;
}

img {
    position: absolute;
    top: 50%;
    left: 4px;
    margin-top: -24px;
}

div {
    margin-left: 56px;
}