JSFiddle - React, Tailwind, and code Playground

HTML

<div class="threecolx mobile-hidden">
  <div class="contact-box">
    <span class="promo-text">Family run for over</span>
    <span class="promo-date">- 30 Yrs -</span>
  </div>
</div>
<div class="sixcolx">
  <!-- Desktop Logo -->
  <div id="hdr-logo">
    <a href="{SELF_URL}" title="{SITE_NAME}"><img src="/img-src/{v2_FOLDER}/theme/logo.png" alt="{SITE_NAME}" class="responsive-img" /></a>
  </div>
  <!-- // END Desktop Logo -->
</div>
<div class="threecolx">
  <div class="contact-box">
    <!-- Social Icons -->
    <div class="telephone"><a href="/contact.php" title="Contact Us"><span class="fa fa-phone"></span> {v2_TELEPHONE_NUMBER}</a></div>
    <div class="email mobile-hidden"><a href="/contact.php" title="Email us"><span class="fa fa-map-marker"></span> Find Us</a></div>
    <!-- // Social Icons -->
  </div>
</div>
<div class="clearfix"></div>

CSS

.threecolx:nth-child(1) .contact-box {
  float: right;
  background-color: #FDD;
}
.threecolx:nth-child(3) .contact-box {
  float: left;
  background-color: #DDF;
}