CODEWITHSUNDEEP
cssflexbox
alleycat
alleycat

Reputation: 41

CSS Flexbox - Align the contents on top and align the button to bottom

I'm trying to modify an existing component which inherits the Flexbox concept.

Currently it looks like this: enter image description here

Now what I'm trying to achieve is regardless of content size inside the box:

  1. The box will have the same height - aligned to each other
  2. The button will stay at the bottom even if the top contents are long.

Here is the existing structure that I'm trying to fix:

<section class="container counsellor-list">
  <div class="row">
    <div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
      <div class="state_chosen">
          <img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
          <div class="bg-blue20 p-30 counsellor-list-item-content">
              <div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
              <span class="">
                  Wien
              </span>
              <span class="ml-16">
                  St. Polten
              </span>
              <span class="ml-auto language">
                  <span>
                  DE
                  <span> | </span>
                  EN
                  </span>
              </span>
              </div>
              <h2 class="mb-24">Jan Faustio</h2>
              <div class="">
              <a class="btn btn-coral" href="#"> Button </a>
              </div>
          </div>
      </div>
  </div>
  ...
</section>

Codepen link

I tried a lot of stuff but didn't work as I'm expecting it to be/result.

Upvotes: 0

Views: 925

Answers (1)

Ivan Bisultanov
Ivan Bisultanov

Reputation: 438

Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX

I also added .btn-wrap classname, and wrapped all HTML above in div

.counsellor-list-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.btn-wrap {
  margin-top: auto;
}

Upvotes: 1

Related Questions