Align single div to bottom of div in row with variable height

Question

I am trying to align a div inside a (bootstrap v4) col inside a (bootstrap v4) row that can have a variable height. Here is a codepen for quick reference - https://codepen.io/ajmajma/pen/veNRdY

and the code itself :

html

<div class="basket-reccomendations">
  <div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
  <div class="basket-reccomendations__body col-12">
    <div class="row">
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">Charcoal</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__price no-variant">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
    </div>
  </div>
</div>

css (scss)

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        margin-bottom: 2rem;
      }
    }
  }
}

If you look at the second row of divs - there is extra text in the height, and what I am trying to achieve is have all the add to bad btns align to the bottom of that singleReccomendation div.

I have tried setting position relative on singleReccomendation and position: absolute, bottom: 0 on the add to bag but it does not seem to be working. I am using flex with bootstrap v4, and am wondering what the best way to solve this problem would be? Thanks!

Answer 1

It should work with position: relative on .singleRecomendation and position: absolute + bottom: 0 on addToBag. You will just have to add a padding to prevent the buttons from overlapping with the text above.

Here is the css:

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 2rem;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        position: absolute;
        bottom: 0;
      }
    }
  }
}

Answer 2

If you add display: flex; flex-direction: column; to .singleReccomendation and then add margin-top: auto to __addToBag it will bottom align

Updated codepen

Stack snippet

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;
}
.basket-reccomendations__body .singleReccomendation {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.basket-reccomendations__body .singleReccomendation__wrapper {
  max-width: 20rem;
  position: relative;
  margin: 0 auto;
}
.basket-reccomendations__body .singleReccomendation__img {
  width: 15rem;
  height: 15rem;
}
.basket-reccomendations__body .singleReccomendation__price {
  color: #000000;
}
.basket-reccomendations__body .singleReccomendation__addToBag {
  text-transform: none;
  margin-bottom: 2rem;
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="basket-reccomendations">
  <div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
  <div class="basket-reccomendations__body col-12">
    <div class="row">
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">Charcoal</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation " href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__price no-variant">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
    </div>
  </div>
</div>