JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="flex">

<div class="icon_box"><div class="icon is1"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

<div class="icon_box"><div class="icon is2"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

<div class="icon_box"><div class="icon is3"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

<div class="icon_box"><div class="icon is4"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

<div class="icon_box"><div class="icon is5"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

<div class="icon_box"><div class="icon is6"></div>
While asbestos is a potent carcinogen, lead impacts many parts of the body, including the brain and bones.</div>

</div>

CSS

.icon {width:70px;height:70px;background:#cccccc;display:inline-block;position:absolute;;top:5px;left:0;background:url('http://www.hloe.co.uk/icon_strip.png');}
.is1 {background-position:0 0;}
.is2 {background-position:right -280px bottom 0;}
.is3 {background-position:right -210px bottom 0;}
.is4 {background-position:right -140px bottom 0;}
.is5 {background-position:right -70px bottom 0;}
.is6 {background-position:right 0px;}

.icon_box {padding:0 10px 0 80px;margin-bottom:30px;min-height:70px;position:relative;box-sizing: border-box;min-width:300px;max-width:33.3%;line-height:25px;}

.flex {max-width:1200px;margin:auto;
  
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}