JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="row">
    <div class="icon"><img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=64&d=identicon&r=PG" /></div>
    <div class="message">some long content here, some long content here, some long content here, some long content here, some long content here, some long content here</div>
</div>
<div class="row">
    <div class="icon"><img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=64&d=identicon&r=PG" /></div>
    <div class="message">some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here, some long content here</div>
</div>
<div class="row">
    <div class="icon"><img src="http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=64&d=identicon&r=PG" /></div>
    <div class="message">some long content here</div>
</div>

CSS

.row {
    overflow: hidden; /* clear the floats */
    background: #ccc;
    margin: 0 0 8px 0 /* margin just for demo */
}
.icon {
    float: left
}
.icon img {
    display: block /* remove "space" under image. try commenting this out to see what I mean */
}
.message {
    margin: 0 0 0 74px
}