How to set the buttons for all cards at the bottom?

Question

how do I align all buttons at the bottom of the card? The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto' however the it's still not being positioned at the bottom?

I attached below the code structure for my cards including the styling for the card content and the buttons.

[![enter image description here](https://i.stack.imgur.com/eJLHT.png)](https://i.stack.imgur.com/eJLHT.png)

<section class="container">
            <div class="card">
                <div class="card-img card-1"></div>
                <div class="card-content">
                    <h2 class="card-header">Bayanihan E-Konsulta</h2>
                    <p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
                    <button class="card-btn">Read more<span>&rarr;</span></button>
                </div>
            </div>

            <div class="card">
                <div class="card-img card-2"></div>
                <div class="card-content">
                    <h2 class="card-header">Swab Cab</h2>
                    <p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
                    <button class="card-btn card-btn-2">Read more<span>&rarr;</span></button>
                </div>
           </div>

           <div class="card">
            <div class="card-img card-3"></div>
                <div class="card-content">
                    <h2 class="card-header">Free PPEs for HCWs</h2>
                    <p class="card-text">Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
                    <button class="card-btn">Read more<span>&rarr;</span></button>
                </div>
            </div>

            <a href="#title" class="secondary-btn">BACK TO TOP</a>

        </section>

`

The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto'. I can fix this by manually adjusting the button's margin but I think it's possible to adjust all buttons simultaneously.

Answer 1

I prepared a example in codepen: https://codepen.io/isaksonn/pen/eYKzarW

section.container .card{display:flex;flex-direction:column;justify-content:space-between;height:600px;width:200px;border:1px solid gray;padding:10px}section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}section.container .card .card-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}

<section class="container">
  <div class="card">
    <div class="card-img card-1"></div>
    <div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
      <div class="divAdded">
          <h2 class="card-header">Bayanihan E-Konsulta</h2>
          <p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
        </div>
      <button class="card-btn">Read more<span>&rarr;</span></button>
    </div>
  </div>

  <div class="card">
    <div class="card-img card-2"></div>
    <div class="card-content">
      <h2 class="card-header">Swab Cab</h2>
      <p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
      <button class="card-btn card-btn-2">Read more<span>&rarr;</span></button>
    </div>
  </div>

 

  <a href="#title" class="secondary-btn">BACK TO TOP</a>

</section>

Answer 2

section.container .card{height:600px;width:200px;border:1px solid gray;padding:10px}
    section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}
    .btn{
        text-align: center;
        margin: 10px 0;
    }

<section class="container">
  <div class="card">
    <div class="card-img card-1"></div>
    <div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
      <div class="divAdded">
          <h2 class="card-header">Bayanihan E-Konsulta</h2>
          <p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
        </div>
      <p class="btn"><button class="card-btn">Read more<span>&rarr;</span></button></p>
    </div>
  </div>

  <div class="card">
    <div class="card-img card-2"></div>
    <div class="card-content">
      <h2 class="card-header">Swab Cab</h2>
      <p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
      <p class="btn"><button class="card-btn card-btn-2">Read more<span>&rarr;</span></button></p>
    </div>
  </div>

 

  <a href="#title" class="secondary-btn">BACK TO TOP</a>

</section>

You can try this..

add button element in 'p' and you can add class in 'p' element and than go to css file and style