JSFiddle - React, Tailwind, and code Playground

by deadendstreet

HTML

<div class="clearfix float-my-children">
   <img src="http://www.carleybakker.com/wp-content/uploads/2017/12/tonya_testimonial.png" width=50px>
   <div style="color: #000; font-size: 12px;">“Carley’s presentation was engaging and informative. She is a strong speaker and gave the audience valuable insights.” 

<div style="font-size: 14px; padding-top: 25px;">Ms. Jones</div>
<div style="font-size:10px">-- Board of Trade</div>
</div>


<div class="clearfix float-my-children">
   <img src="http://www.carleybakker.com/wp-content/uploads/2017/12/todd_testimonial.png" width="50px">
   <div style="color: #000; font-size: 12px;">“A talented speaker she is a welcome addition to any business event; you will learn something. Very pro and easy to work with too!”
<div style="font-size: 14px; padding-top: 25px;">Mr. Jones</div>
<div style="font-size:10px"> -- Better Business Bureau</div>
</div>

CSS

/* tell the container's children to float left: */

.float-my-children>* {
  float: left;
  
}

.float-my-children > img {
  margin-right: 5px;
  width: calc(10% - 5px);
}

.float-my-children > div {
  width: 90%;
}

/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */

.clearfix {
  *zoom: 1/* for IE */
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}


/* end clearfix*/


/* below is just to make things easier to see, not required */

body>div {
  border: 1px dashed red;
  margin-bottom: 10px;
}