JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-quote-container">
  <div class="my-item">
    <div class="my-head"> <img src="http://s6.postimg.org/qara2aba5/testimonial_item.png" class="img-responsive my-head-img" /> </div>
    <div class="my-body">
      <div class="my-quote">Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus erat porttitor.</div>
      <br>
      <span class="my-author cap">Lorem Ipsum</span> <br />
      <span class="my-author">lorem</span> </div>
  </div>
</div>

CSS

.my-head{
    width:61px;
    float:left;
}
.my-body{
    padding-top:15px;
    width:auto;
    max-width:90%;
    float:left;
}

.my-quote-container {
    font-family: Arial;
    font-size: 14px;
    color: #0a3980;
    text-align: left;
    margin-bottom: 0px!important;
    background: #e6e6e6;
    border-radius: 70px;
    min-height: 81px;
    clear:both;
    
}
.my-head-img{
    float:left;
    transform: rotate(270deg);
    margin: 8px 8px 8px 15px;
    margin-right:25px;
}
.my-quote{
    text-align: left;
    display:table;
    padding-right:35px;
    padding-left:35px;
    float:left;
}
.my-body span{
    clear: right; float: right;
    padding-right:42px;
    color:#666666;
}
}
.my-author{
    text-transform: uppercase;
    margin-top:5px;
}

.my-author-org{

}