Нужно сделать кнопки на одном уровне, точнее, поместить их как-то вниз блока.
Пытался это сделать свойством align-items: flex-end
(оно закомментированно), ничего не произошло.
body {
font-family: Arial, sans-serif;
}
.container {
margin-left: 50px;
max-width: 1185px;
margin-right: 50px;
margin: 0 auto;
}
.h {
font-size: 30px;
color: #445161;
}
.bg {
background-color: #445162;
max-width: 300px;
}
.vertical-columns {
display: flex;
justify-content: space-between;
padding-top: 35px;
}
.vertical-align h2 {
text-align: center;
}
.vertical-align {
margin-top: 95px;
}
.vertical-columns h3 {
font-size: 24px;
color: #fff;
text-align: center;
padding-top: 18px;
text-transform: uppercase;
}
.vertical-columns h4 {
font-size: 40px;
text-transform: lowercase;
text-align: center;
padding: 25px 25px;
border: 2px solid #445162;
background-color: #fff;
color: #445162;
margin-top: 14px;
}
.vertical-columns p {
color: #fff;
padding: 21px;
line-height: 1.5;
}
.bg a {
display: flex;
justify-content: center;
/*align-items: flex-end;*/
font-size: 18px;
color: #445162;
padding: 15px 70px;
background-color: #fff;
margin: 0 20px;
border-radius: 5px;
margin-bottom: 20px;
}
<section class="container vertical-align">
<h2 class="h">Вертикальное выравнивание</h2>
<div class="vertical-columns">
<div class="first-column bg">
<h3>Буду рад</h3>
<h4>Подписке</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo vero reiciendis consectetur.</p>
<a>Подписаться</a>
</div>
<div class="second-column bg">
<h3>Буду рад</h3>
<h4>Лайку</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo vero reiciendis consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo vero reiciendis consectetur tempora voluptatum dolorum.</p>
<a>Лайк</a>
</div>
<div class="third-column bg">
<h3>Буду рад</h3>
<h4>Комментарию</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur fugit vel, eligendi illum, placeat quo vero reiciendis consectetur.</p>
<a href="#">Комментировать</a>
</div>
</div>
</section>