JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="img">
        <a href="#">
            <img class="ava" src="http://avatarmaker.net/free-avatars/avatars/animated_214/yellow_smile_blabla_animated_avatar_100x100_62415.gif" alt="">
        </a>
    </div>
    <div class="text">
        <p>Lorem ipsum dolor sa</p>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    margin: 0 0 10px;
}

.block {
    padding: 10px;
    margin: 30px auto 0;
    width: 250px;
    
    background: #eee;
    border: 1px solid #777;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.3);
}

    .block .img {
        float: left;
        width: 40%;
        height: 100px;
        margin: 0 10px 0 0;
    
        background: #393;
    }

    .block .ava {
        display: block;
        max-width: 100%;
    }
    
    .block .text {
        float: none;
        margin: 0;
    }