JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<div id="keyContacts">  
  <div class="keyContact" style="width: 100%;">
    <a href="/_layouts/15/userdisp.aspx?ID=38"><img class="contactImg" src="http://advocate/_layouts/15/images/person.gif"></a>
    <div class="contactData">
      <div class="contactName"><a href="http://advocate/_layouts/15/userdisp.aspx?ID=38">Daniela Acosta</a><span class="contactEmail"><a title="Email" href="mailto:[email protected]"><img src="http://advocate/sites/ep/assets/core/img/icons/Black_no_circle/email.png"></a></span></div>
      <div
      class="contactJobTitle" style="vertical-align: middle;">Administrative Staff</div>
    <div class="contactRole">[Role]</div>
  </div>
</div>
<div class="keyContact">
  <a href="http://advocate/_layouts/15/userdisp.aspx?ID=21"><img class="contactImg" src="http://advocate/_layouts/15/images/person.gif"></a>
  <div class="contactData">
    <div class="contactName"><a href="http://advocate/_layouts/15/userdisp.aspx?ID=21">Kristine Colwill</a><span class="contactEmail"><a title="Email" href="mailto:"><img src="http://advocate/sites/ep/assets/core/img/icons/Black_no_circle/email.png"></a></span></div>
    <div class="contactJobTitle">[Job Title]</div>
    <div class="contactRole">Content Owner</div>
  </div>
</div>
</div>

CSS

/*.keyContacts {    
    width:100%;
}
.keyContact {
    margin-bottom:20px;
    clear:both;
}*/
.contactImg {
    width:40px;
    height:40px;
    border-radius:40px;
    margin-right:20px;
    float:left;
}
.contactData {
    float:left;
    margin-right:60px;
    width:80%;
}
.contactData > div {
    float:left;
    width:25%;
    padding:0px 15px;
}
div.contactName {width:50%; white-space: nowrap}
.contactEmail {margin-left:30px;}