JSFiddle - React, Tailwind, and code Playground

HTML

<div class='test'>
    <ul>
        <li class='back' style='background-image:url("http://placehold.it/50x50")'>
            <p><span>first line of text</span><br/>more descriptive text</p>
        </li>
        <li class='back' style='background-image:url("http://placehold.it/50x50")'>
            <p><span>first line of text</span><br/>more descriptive text</p>
        </li>
    </ul>
</div>

CSS

div.test {
    position:absolute;
    top: 50px;
    left: 50px;
    z-index: 9996;
    background-color: #fff;
    border: 1px solid #aaa;
    padding: 10px;    
    height: auto;
    -webkit-box-shadow: 3px 5px 10px #ccc;
    -moz-box-shadow: 3px 5px 10px #ccc;
    box-shadow: 3px 5px 10px #ccc;
}

div.test > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
    vertical-align: middle;
}

div.test > ul li:hover {
    background-color: #ddd;
}

div.test > ul li {
    height:50px;
    padding: 5px 5px 5px 65px;
    margin: 0;    
}

.back {
    background-repeat: no-repeat;
    background-position: 5px 5px;
}