JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<ul class="ex_comments">
<li><img class="ex_ava" src="http://lastfm.i.tracksflow.com/serve/126/50325739.png"></img><h4>User Name</h4><img class="ex_rate" src="http://s3-media4.ak.yelpcdn.com/assets/2/www/img/ccf2b76faa2c/ico/stars/stars_large_4.png"></img><p>I came here about a year ago on a weekday and I remember almost passing out from laughter during the comedy show. </p></li>
</ul>

CSS

.ex_comments{
display: block;
    width: 610px;
}

.ex_comments li{
display: inline-block;
    width: 100%;
    height: 70px;
    background: #f1f1f1;
}

.ex_ava{
display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: black;
    border: solid 1px silver;
    margin:10px;
    float: left;
}

.ex_comments h4 {
font: bold 11pt/1em calibri,sans-serif;
    width: 150px;
    padding: 10px 0px 0;
    display: inline-block;
}

.ex_rate{
    display: inline-block;
    float: right;
    width: 70px;
  margin: 10px 10px 0px;

}

.ex_comments li p{
display: inline-block;
font: 10pt/1em calibri, sans-serif;
width: 530px;
margin-top: 5px;
}