<div class="sc-totals card">
  <div class="card-body">
    <h2 class="sc-totals__title">
      <span>Totals</span>
      <span>53.21</span>
    </h2>

    <ul class="sc-totals__lines">
      <li class="sc-totals__line -savings">
        <span>Savings</span>
        <span>5.09</span>
      </li>
      <li class="sc-totals__line -currency">
        <span>Currency</span>
        <span>USD</span>
      </li>
      <li class="sc-totals__line -tax">All prices includes tax</li>
    </ul>

    <form class="input-group sc-totals__promo-code">
      <input type="text" class="form-control" placeholder="Promo Code" aria-label="Promo Code">
      <button class="btn sc-totals__btn -promo-code" type="button" id="btnApply">Apply</button>
    </form>

    <div class="form-group form-check sc-terms-checkbox">
      <input type="checkbox" class="form-check-input" id="terms">
      <label class="form-check-label" for="terms">Accept <a href="https://getbootstrap.com/" target="_blank">Terms and Conditions</a></label>

    </div>
    <a class="btn sc-totals__btn -checkout">Checkout</a>
    <a class="btn sc-totals__btn -pickup">Store Pickup</a>
  </div>
</div>
.sc-totals {
  .card-body {
     display: flex;
     flex-direction: column;
  }
}

.sc-totals__title, 
.sc-totals__line {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
}

.sc-totals__lines {
  padding-left: 0;
  list-style: none;
}

.sc-totals__line {
  &.-savings {
    color: $success;
  }
  
  &.-tax {
    color: $gray-400;
    font-size: $font-size-sm;
  }
}

.sc-totals__btn {
  margin-bottom: map_get($spacers, 2);
  margin-top: map_get($spacers, 2);
  
  &.-checkout {
    @include button-variant($primary, $primary);
  }
  &.-pickup {
    @include button-outline-variant($primary);
  }
}

.sc-totals__promo-code {
  margin-bottom: map_get($spacers, 3);
  order: -1;
  
  .sc-totals__btn.-promo-code {
    margin-bottom: map_get($spacers, 0);
    margin-top: map_get($spacers, 0);
    @include button-outline-variant($primary);
  }
}

.sc-terms-checkbox {
  display: flex;
  justify-content: center;
  margin-bottom: map_get($spacers, 3);
  
  .form-check-input {
    margin-right: map_get($spacers, 2);
  }
}

//----------------------------------------Case-1
/*.sc-terms-checkbox {
   display: none;
  }

.sc-totals {
  .sc-terms-checkbox {
   display: none;
  }
}

.sc-terms-checkbox, 
.sc-totals__line.-savings{
   display: none;
}


.sc-btn-checkout{
    order: 1
}
.sc-promo-code{
  order: 2
}

.sc-totals__lines{
    order: 3
}

.sc-totals__title {
  order: 4
}

.sc-totals__promo-code {
  margin-top: map_get($spacers, 3);
  .sc-btn-promo-code {
    @include button-variant($primary, $primary);
  }
}

.sc-totals__btn {
  &.-pickup {
    @include button-variant($white, $white);
  }
}
*/

//--------------------------------------Case-2
.sc-totals {
  .sc-terms-checkbox {
   display: none;
  }
}

.sc-totals__btn {
  &.-pickup {
   display: none;
  }
}

.sc-totals__btn.-checkout{
    order: 1;
}

.sc-totals__lines{
    order: 2;
}

.sc-totals__title {
  order: 3;
}

.sc-totals {
  .sc-terms-checkbox {
    order: 5;
  }
}

.sc-totals__promo-code {
  order: 6;
}


.sc-totals__title,
.sc-totals__lines,
.sc-totals__promo-code {
  border-left: $border-width solid $border-color;
  border-top: $border-width solid $border-color;
  border-right: $border-width solid $border-color;
  padding: map_get($spacers, 2);
  margin-bottom: 0;
}

.sc-totals__promo-code {
  border-bottom: $border-width solid $border-color;
}

.sc-totals__line,
.sc-totals__title {
  & span:first-child {
     color: $gray-500;
  }
  
  & span:last-child {
      font-weight: $font-weight-bolder;
  }
}

.sc-totals__title {
  & span:last-child {
      color: $green;
  }
  & span:first-child {
      color: $black;
  }
}

.sc-totals__line {
  &.-tax {
    color: $primary;
    font-size: $font-size-sm * 0.8;
  }
  &.-savings {
    color: $black;
  }
}
//----------------------------------------Case-3
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/scss/_functions.scss
  2. https://assets.codepen.io/t-13789/_Totals-Case-2.scss
  3. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/scss/_variables.scss
  4. https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/scss/vendor/_rfs.scss
  5. https://assets.codepen.io/t-13789/bootstrap5_mixins.scss
  6. https://assets.codepen.io/t-13789/_Bootstrap5-core.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.