JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li> 
        <a href="viewBook.php?bookId=<?=$bookId?>"> 
            <img src="http://dummyimage.com/50x75/000/fff"/>
            <span id="text">
                <?=$count?>. <?=$title?>
            </span>
        </a>
    </li>
    <li> 
        <a href="viewBook.php?bookId=<?=$bookId?>"> 
            <img src="http://dummyimage.com/50x75/000/fff"/>
            <span id="text">
                15. The long title goes here.
            </span>
        </a>
    </li>
</ol>

CSS

ol {
    padding:0;
    width:200px;
}
ol li {
    list-style:none;
    margin-bottom:10px;
}
ol li a {
    display:block;
}
ol li a:hover {
    background-color:#e8e8e8;
}

#text {
    display: table-cell;
    width: 100px;
    height: 75px;
    padding: 10px;
    vertical-align: middle;
}

img {
    float: left;
    padding-left: 10px;
    width:50px;
    height:75px;
}