3 контейнера одинаковой длины, хочу понять, как разместить кнопку в нижней части контейнера на все три одном уровне. Это можно сделать с помощью относительного позиционирования, но я хочу понять как это сделать с помощью флексов или каким-то другим способом.
*{
margin: 0;
padding: 0;
}
#sail{
width: 100%;
max-width: 1200px;
margin: auto;
display: flex;
justify-content: center;
padding-top: 80px;
gap: 1rem;
}
.product{
width: 25%;
border: 2px solid black;
text-align: center;
/*position: relative;*/
}
.product-pages{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.product-page{
margin: 20px;
margin-bottom: 50px;
}
h3{
text-align: center;
padding: 5px;
background: #dcd5d5;
font-size: 1.5rem;
}
.product-price{
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 10px;
}
button{
width: 50%;
font-weight: bold;
font-size: 1rem;
background: #a9e5db;
color: #326;
border: none;
padding: 5px;
margin-bottom: 10px;
text-transform: uppercase;
/* position: absolute;
bottom: 0;*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<container id="sail">
<article class="product">
<h3>TENOR TROMBONE</h3>
<div class="product-pages">
<div class="product-page">
<span class="product-price">
<span class="product-price">600</span>
<span class="product-rub">$</span>
</span>
<p>Духовой инструмент, изготовляемый из меди, способный воспроизводить звуки басово-тенорового регистра.</p>
</div>
<button>Выбрать</button>
</div>
</article>
<article class="product">
<h3>BASS TROMBONE</h3>
<div class="product-pages">
<div class="product-page">
<span class="product-price">
<span class="product-price">900</span>
<span class="product-rub">$</span>
</span>
<p> С большим отверстием, раструбом и мундштуком для облегчения игры в низких регистрах, и обычно двумя клапанами для заполнения недостающего диапазона непосредственно над тонами педалей.</p>
</div>
<button>Выбрать</button>
</div>
</article>
<article class="product">
<h3>VALVE TROMBONE</h3>
<div class="product-pages">
<div class="product-page">
<span class="product-price">
<span class="product-price">1200</span>
<span class="product-rub">$</span>
</span>
<p>Духовой инструмент семейства тромбонов, который имеет набор клапанов для изменения высоты тона вместо (или в дополнение к) ползуна.</p>
</div>
<button>Выбрать</button>
</div>
</article>
</container>
</body>
</html>