<div class="container">
  <div class="row">
    <h4 class="col-lg-12 col-md-12 col-xs-12">Kuponlarım</h4>
    <p class="col-lg-12 col-md-12 col-xs-12">Kullanmak istediğiniz indirim kuponunu sepet sayfasında seçebilirsiniz.</p>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 mb-3">
      <div class="card coupon">
        <div class="card-body coupon-body">
          <h6 class="card-title coupon-title">İndirim Kuponu 1</h6>
          <div class="title-seperator"></div>
          <div class="row details">
            <div class="col-8 coupon-details">
              <div class="container-text">
                <span>
                  <b>Aktivasyon Tarihi: &nbsp;</b>
                  06/04/2020
                </span><br />
                <span>
                  <b>Son Kullanma Tarihi: &nbsp;</b>
                  12/04/2020
                </span><br />
                <span>
                  <b>Alt Limit: &nbsp;</b>
                  150 TL
                </span><br />
                <span>
                  <b>Kupon Kodu: &nbsp;</b>
                  DAMLAKOKSAL
                </span>
              </div>
            </div>
            <div class="col-4 discount-details">
              <span>
                <h4 align="center">50 TL</h4>
              </span>
              <p align="center"><button class="btn btn-sm btn-outline-danger p-1">Ürünleri Gör</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12 mb-3">
      <div class="card coupon">
        <div class="card-body coupon-body">
          <h6 class="card-title coupon-title">İndirim Kuponu 1</h6>
          <div class="title-seperator"></div>
          <div class="row details">
            <div class="col-8 coupon-details">
              <div class="container-text">
                <span>
                  <b>Aktivasyon Tarihi: &nbsp;</b>
                  06/04/2020
                </span><br />
                <span>
                  <b>Son Kullanma Tarihi: &nbsp;</b>
                  12/04/2020
                </span><br />
                <span>
                  <b>Alt Limit: &nbsp;</b>
                  150 TL
                </span><br />
                <span>
                  <b>Kupon Kodu: &nbsp;</b>
                  DAMLAKOKSAL
                </span>
              </div>
            </div>
            <div class="col-4 discount-details">
              <span>
                <h4 align="center">50 TL</h4>
              </span>
              <p align="center"><button class="btn btn-sm btn-outline-danger p-1">Ürünleri Gör</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12 mb-3">
      <div class="card coupon">
        <div class="card-body coupon-body">
          <h6 class="card-title coupon-title">İndirim Kuponu 1</h6>
          <div class="title-seperator"></div>
          <div class="row details">
            <div class="col-8 coupon-details">
              <div class="container-text">
                <span>
                  <b>Aktivasyon Tarihi: &nbsp;</b>
                  06/04/2020
                </span><br />
                <span>
                  <b>Son Kullanma Tarihi: &nbsp;</b>
                  12/04/2020
                </span><br />
                <span>
                  <b>Alt Limit: &nbsp;</b>
                  150 TL
                </span><br />
                <span>
                  <b>Kupon Kodu: &nbsp;</b>
                  DAMLAKOKSAL
                </span>
              </div>
            </div>
            <div class="col-4 discount-details">
              <span>
                <h4 align="center">50 TL</h4>
              </span>
              <p align="center"><button class="btn btn-sm btn-outline-danger p-1">Ürünleri Gör</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12 mb-3">
      <div class="card coupon">
        <div class="card-body coupon-body">
          <h6 class="card-title coupon-title">İndirim Kuponu 1</h6>
          <div class="title-seperator"></div>
          <div class="row details">
            <div class="col-8 coupon-details">
              <div class="container-text">
                <span>
                  <b>Aktivasyon Tarihi: &nbsp;</b>
                  06/04/2020
                </span><br />
                <span>
                  <b>Son Kullanma Tarihi: &nbsp;</b>
                  12/04/2020
                </span><br />
                <span>
                  <b>Alt Limit: &nbsp;</b>
                  150 TL
                </span><br />
                <span>
                  <b>Kupon Kodu: &nbsp;</b>
                  DAMLAKOKSAL
                </span>
              </div>
            </div>
            <div class="col-4 discount-details">
              <span>
                <h4 align="center">50 TL</h4>
              </span>
              <p align="center"><button class="btn btn-sm btn-outline-danger p-1">Ürünleri Gör</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12 mb-3">
      <div class="card coupon">
        <div class="card-body coupon-body">
          <h6 class="card-title coupon-title">İndirim Kuponu 1</h6>
          <div class="title-seperator"></div>
          <div class="row details">
            <div class="col-8 coupon-details">
              <div class="container-text">
                <span>
                  <b>Aktivasyon Tarihi: &nbsp;</b>
                  06/04/2020
                </span><br />
                <span>
                  <b>Son Kullanma Tarihi: &nbsp;</b>
                  12/04/2020
                </span><br />
                <span>
                  <b>Alt Limit: &nbsp;</b>
                  150 TL
                </span><br />
                <span>
                  <b>Kupon Kodu: &nbsp;</b>
                  DAMLAKOKSAL
                </span>
              </div>
            </div>
            <div class="col-4 discount-details">
              <span>
                <h4 align="center">50 TL</h4>
              </span>
              <p align="center"><button class="btn btn-sm btn-outline-danger p-1">Ürünleri Gör</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.coupon {
    height: 170px;
}

.coupon-details {
    padding-top: 0.25rem;
}

.coupon-body {
    padding: 0.75rem !important;
}

.details {
    height: 90%;
    padding-top: 1rem;
}

.title-seperator {
    left: 0;
    border-bottom: 1px solid rgba(0,0,0,.125);
    position: absolute;
    width: 100%;
}

.coupon-title {
    margin-bottom: .50rem;
}

.discount-details {
    padding-top: 0.5rem;
}

.container-text {
    font-size: 12px;
    line-height: 1.25rem;
    border-right: 1px dashed rgba(0,0,0,.125);
}

@media (max-width: 992px) {
    .container-text {
        font-size: 12px;
        margin: 0 !important;
        border-right: 1px dashed rgba(0,0,0,.125);
    }
}

@media (min-width: 767px) and (max-width: 1200px) {
    .coupon-details {
        padding-top: 0.25rem;
        padding-right: 1px;
    }
}

@media (max-width: 372px) {
    .details {
        height: 75%;
        padding-top: 0;
    }

    .coupon-details {
        padding-top: 0.25rem;
        padding-right: 0rem;
    }

    .discount-details {
        padding-top: 1rem;
    }

        .discount-details h4 {
            width: 65px;
        }
}

@media (min-width: 350px) and (max-width: 372px) {
    .coupon-details {
        padding-top: 0.75rem;
    }
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.