JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>
<a href="#">
    <span class="img"></span>
    <b class="text">text text text</b>
</a>

CSS

a {
    background: red;
    padding: 5px;
    overflow: hidden;
    -ms-zoom: 1;
    text-decoration: none;
    color: silver;
}

a, a span, a b {
    display: block;
}

a .img {
    width: 50px;
    height: 50px;
    float: left;
    background: green;
}

a .text {
    margin-left: 55px;
}

a:hover {
    background: pink;
}