JSFiddle - React, Tailwind, and code Playground

by Joel Derbyshire

HTML

<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>

CSS

.chat-list > li.user {
    height: 50px;
    margin-bottom: 5px;
    width: 100%;
    display:block;
}
.user a {display:table;text-align:left;}
.user a img {display:table-cell;width:50px;}
.user span {
    display: table-cell;
    margin-left: 8px;
    width: 69%;
    word-break: normal;
    vertical-align:middle;
}