JSFiddle - React, Tailwind, and code Playground

by mohamm_98666

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
  <div class="col-6">
    <div class="our-image"></div>
  </div>
  <div class="col-6">
    <div class="contact-details">
      <!-- start contact item -->
      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-map-o"></i>
          <div class="contact-title">Contact Address</div>
          <p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-comments-o"></i>
          <div class="contact-title">Let's Talk</div>
          <p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
          <p class="center-col text-medium">Fax: 1-800-222-002</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-envelope-o"></i>
          <div class="contact-title">Email Us</div>
          <p class="center-col text-medium no-margin"><a href="mailto:info@domain.com">info@domain.com</a></p>
          <p class="center-col text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p>
        </div>
      </div>

      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-clock-o"></i>
          <div class="contact-title">Working Hours</div>
          <p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
          <p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
        </div>
      </div>

    </div>
  </div>
</div>

CSS

.our-specials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.our-specials .column-6 {
  width: 50%;
  float: left;
  display: table;
  flex-wrap: wrap;
  justify-content: center;
  color: #fff;
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.our-image {
  background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
  background-repeat: no-repeat;
  padding-top: 61.766%;
  background-size: cover;
}

.contact-details {
  text-align: center;
}

.contact-inner {
  height: 318px;
  width: 50%;
  padding: 0 60px;
  display: table-cell;
  vertical-align: middle;
}

.contact-inner i {
  font-size: 35px;
  margin-bottom: 10px;
  color: #c8001a;
}

.contact-inner p {
  font-size: 14px;
  color: #6f6f6f;
}

.bg-black {
  background-color: #000000;
}

.bg-extra-dark-grey {
  background-color: #1c1c1c
}

@media only screen and (max-width: 1024px) {
  .our-image {
    padding-top: 88.166%;
  }
}