JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<footer class="footer">
  <div class="row">
    <div class="col-md-6  col-sm-5 col-lg-4">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-6  footer-Darkerblue">
        <p class="footer-ul footer-text-align">
          <span class="footer-headtext text-uppercase">destination</span>
          <br>
          <span class="footer-Kilomet">6.8 Kms </span>
          <span class="footer-min">25 Min away</span>
        </p>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-6  col-xs-2 footer-Darkenblue">
        <ul class="footer-ul footerstatus-text-align">
          <li class="footer-headtext text-uppercase">
            Status
          </li>
          <li class="footer-min-text">
            In Transit
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-6 col-sm-7 col-lg-8  hidden-xs" id="showmobilecont">
      <div class="">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="dotted">
            <ul class="footer-ul footer-direction-text">
              <li>
                <i class="fa fa-circle-o direction-icon-circle"></i>
                <div class="footer-map-text">Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue, North End, Silhurst, Loamshire, SH15 6BP</div>
              </li>
              <li class="footer-li-pad">
                <i class="fa fa-map-marker direction-icon"></i>
                <div class="footer-map-text">As Directed</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="">
        <div class="col-lg-2 col-sm-6 col-xs-12 footer-left-border" style="margin-top: 0px;">
          <ul class="footer-ul"...

CSS

/*footer css starts here for track page*/

.footer {
  background-color: #012359;
  z-index: 20;
  height: 12%;
  width: 100%;
  bottom: 0px;
  color: white;
  font-family: 'Droid Sans';
  font-weight: 400;
}

.footer-left-border {
  border-left: 1px solid #153466;
  margin-top: 15px;
}

.footer-Darkerblue {
  background-color: #00112c;
  height: 160px;
}

.footer-Darkenblue {
  background-color: #011c47;
  height: 160px;
}

.footer-headtext {
  color: #6cafff;
  font-size: 14px;
}

.footer-Kilomet {
  font-size: 26px;
  display: inherit;
}

.footer-min {
  padding-top: 0px;
  font-size: 18px;
}

.footer-min-text {
  font-size: 20px;
  margin-top: 5px;
}

.footer-ul {
  list-style-type: none;
  padding: 0px;
  color: white;
  margin-top: 15px;
}

.footer-direction-text {
  margin-top: 18px;
  font-size: 16px;
}

.footer-text-date {
  margin-top: -12px;
}

.footer-li-date-time {
  display: inline-block;
}

.footer-li-pad {
  padding-top: 10px;
}

.footer-map-text {
  padding-left: 30px;
  margin-top: -6%;
}

.footer-poi-color {
  color: red;
}

.dotted:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 21px;
  bottom: 0;
  left: 8px;
  height: 35px;
  border-left: 2px dotted lightgrey;
}

.dotted {
  position: relative;
  margin: 10px auto;
}

.footer-text-align {
  text-align: left;
  padding-left: 25%;
}

.footerstatus-text-align {
  text-align: left;
}


/*Media queries*/

@media screen and (max-width: 1200px) {
  .col-centered {
    width: 80%;
  }
  .input-div {
    margin: 0px;
    padding: 0px;
  }
  .sub-text {
    font-size: 13px;
  }
  .currency-div {
    font-size: 23px;
  }
  .time-div {
    font-size: 23px;
  }
  .payment-select select {
    font-size: 14px;
  }
  #datepick {
    font-size: 14px;
  }
  #filter-text-field {
    font-size: 14px;
  }
  #filter-dropdown {
    font-size: 14px;
  }
  .footer {
    background-color: #012359;
    height: 20%;
  }
  .dotted:after {
    border-left: 0px dotted lightgrey;
  }
 ...

JavaScript

$(document).on('click', '.showmorelink', function({
      $('#showmobilecont').toggle('slow');

    });