<div class="container">
      <div class="row">
        <div class="col-sm-12">
          <br>
          <h2>Info Data in Table Style - CSS</h2>
          <br>
        </div>
        <div class="col-lg-8">
          <div class="request-info-table">
            <div class="info-row">
              <div class="info-cell">
                <p><strong>Country: </strong>Albania, Pakistan</p>
              </div>
            </div>
            <div class="info-row">
              <div class="info-cell">
                <p><strong>Trip Start in (City): </strong>Islamabad</p>
              </div>
              <div class="info-cell">
                <p><strong>Trip Ends in (City): </strong>Lahore</p>
              </div>
            </div>
            <div class="info-row">
              <div class="info-cell">
                <p><strong>Required Service: </strong>Private Tour</p>
              </div>
              <div class="info-cell">
                <p><strong>Prefered Tour Language: </strong>Arabic</p>
              </div>
            </div>
            <div class="info-row">
              <div class="info-cell">
                <p><strong>Group Tour: </strong>Yes/No</p>
              </div>
              <div class="info-cell">
                <p><strong>Number of People: </strong>3</p>
              </div>
            </div>
            <div class="info-row">
              <div class="info-cell">
                <p><strong>Budget per person in USD: </strong>10$</p>
              </div>
              <div class="info-cell">
                <p><strong>Trip Dates: </strong>16/05/2019 to 19/05-2019</p>
              </div>
            </div>
          </div>  <!-- /end request-info-table -->
        </div>  <!-- /end col-sm-8 -->
      </div>  <!-- /end row -->
    </div>  <!-- /end container -->
.request-info-table {
  width: 100%;
  margin-top: 0;
  float: left;
}
.request-info-table .info-row {
  float: left;
  width: 100%;
  background: #f8f8f8;
  margin-bottom: 2px;
}
.request-info-table .info-row:nth-child(2n) {
  background: #fff0d2;
}
.request-info-table .info-cell {
  float: left;
  width: 50%;
  padding: 9px 0 9px 21px;
}
.request-info-table .info-row:first-child .info-cell {
  width: 100%;
}
.request-info-table .info-cell p {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 0;
}
.request-info-table .info-cell p strong {
  font-weight: 700;
}


/* ----- Responsive Styles ----- */

@media (max-width: 767px) {
  .request-info-table .info-row {
    background: transparent !important;
    margin-bottom: 0;
  }

  .request-info-table .info-cell {
    width: 100%;
    background: #f8f8f8;
    margin-bottom: 2px;
  }

  .request-info-table .info-cell:nth-child(2n) {
    background: #fff0d2;
  }

  .request-info-table .info-row:first-child .info-cell {
    background: #fff0d2;
  }
}

@media (max-width: 424px) {
  .request-info-table .info-cell {
    padding-left: 15px;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.