Как прижать кнопку к низу блока div?

Question

[Виктор Клевич]

У меня есть вот такой вот код html, блок div:

<div class="buy_card">
            <h1>До конца акции: </h1>
            <p id="tr_time"></p>
            <script>
                // Set the date we're counting down to
                var countDownDate = new Date("Jun 22, 2023 15:00:00").getTime();
                    
                // Update the count down every 1 second
                var x = setInterval(function() {
                    
                    // Get todays date and time
                    var now = new Date().getTime();
                        
                    // Find the distance between now an the count down date
                    var distance = countDownDate - now;
                        
                    // Time calculations for days, hours, minutes and seconds
                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                    // Output the result in an element with id="demo"
                    document.getElementById("tr_time").innerHTML = hours + ' ч, ' + minutes + ' м, ' + seconds + ' с. ';
                        
                    // If the count down is over, write some text 
                    if (distance < 0) {
                        clearInterval(x);
                        document.getElementById("tr_time").innerHTML = "EXPIRED";
                    }
                }, 1000);
            </script>
            <button>Купить</button>
        </div>

И вот такой CSS:

.buy_card {
    width: 25%;
    background-color: #ACDCFF;
    margin: 0 auto;
    right: 0;
    border-radius: 20px;
    font-family: 'Geologica', sans-serif;
    font-size: 20px;
    padding: 20px;
    text-align: center;
}

.buy_card button {
    font-family: 'Geologica', sans-serif;
    font-size: 17px;
    background-color: rgb(0, 0, 0);
    color: white;
    width: 70%;
    padding: 10px;
    border-radius: 15px;
    border: 0;
    cursor: pointer;
}

И выглядит это, вот так:


Вопрос:
Как сделать так что-бы эта кнопка была внизу блока? Всегда, независимо от размера этого блока.

Я понимаю что вопрос возможно простой, но я не смог найти решения. Всё что я находил, либо не работало, либо работало не правильно

Comments

[rootnoroot]

блоку дайте position relative
кнопке position absolute bottom напр. 20 px

[Ankhena]

Карточке флекс колонками.
Кнопке margin-top: auto
Для такого варианта не нужны лишние обертки, как в варианте со space-between.

Можно гридами.

Только, пожалуйста, не абсолютом.

Answer 1

[modelair]

<div class="buy_card">
  <div>
    <h1>До конца акции: </h1>
    <p id="tr_time"></p>
  </div>
  <button>Купить</button>
</div>

.buy_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

Comments

[Виктор Клевич]

Спасибо!