Есть два блока, в каждом разное количество текста. В конце каждого блока есть кнопка, ей заданы отступы с помощью margin.
Из-за того что в блоке разное количество текста, кнопки находятся на разной высоте. А мне нужно что бы они находились на одинаковой высоте. Как это можно сделать?
UPD 1: Поведение кнопки при анимации.
.specialty {
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #e4fdf9;
-webkit-justify-content: center;
-webkit-flex-direction: column;
}
.specialty-content {
display: flex;
display: -webkit-flex;
justify-content: space-around;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-webkit-flex-wrap: wrap;
}
.specialty-content__wrap {
margin-bottom: 40px;
}
.specialty-content__info {
display: block;
margin-bottom: 20px;
text-align: center;
word-wrap: break-word;
background: #fff;
flex: 0 0 40%;
-webkit-flex: 0 0 40%;
}
.specialty-content__info img {
margin: 50px auto 0 auto;
width: 64px;
height: 64px;
}
.specialty-content__info h4 {
font-size: 22px;
padding: 20px 10px;
}
.specialty-content__info p {
font-size: 16px;
padding-bottom: 40px;
padding: 0 20px 40px 20px;
text-align: justify;
}
/* Анимация кнопки подробнее */
.specialty-content__info a {
display: inline-block;
align-items: center;
position: relative;
padding: 10px 20px;
margin-bottom: 50px;
font-size: 20px;
text-transform: uppercase;
color: #000;
overflow: hidden;
transition: 0.3s ease-out 0.3s;
-webkit-transition: 0.3s ease-out;
-webkit-transition-delay: 0.3s;
-moz-transition: 0.3s ease-out 0.3s;
-o-transition: 0.3s ease-out 0.3s;
}
<div class="specialty">
<div class="wrap">
<div class="specialty-title title">
<h2>Специальности</h2>
</div>
<div class="specialty-content__wrap">
<div class="specialty-content">
<div class="specialty-content__info">
<img src="img/specialty/desktop.svg" alt="Black">
<h4>Lorem</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut perspiciatis itaque, doloribus impedit saepe iure totam consectetur. Provident architecto inventore odio exercitationem distinctio consequatur doloribus rem pariatur, tempora nihil vitae ullam cum dignissimos dolor optio eius laboriosam fugiat beatae tempore quaerat sed. Similique porro nobis corporis dolorum facere reprehenderit commodi!</p>
<a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
</div>
<div class="specialty-content__info">
<img src="img/specialty/padlock.svg" alt="Black">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab libero laborum facilis rem facere vero, iure neque doloribus quas laudantium voluptatem aperiam eum. Odio adipisci soluta voluptas tenetur, incidunt et non repellat suscipit, eaque atque nesciunt doloribus. Labore, illo! Explicabo cumque aliquid fugit culpa reiciendis labore ullam necessitatibus? Dignissimos, quibusdam deleniti sapiente impedit, voluptas eos error provident aliquam blanditiis porro ducimus quo beatae corrupti quam, nisi recusandae inventore. Architecto, laboriosam corporis dolorum totam quis praesentium, consequuntur repudiandae dicta, quasi iusto aut perferendis! Ut, saepe distinctio laborum accusantium fuga veritatis? Eligendi, consectetur saepe. Maxime illo ullam, quisquam sed aliquam sunt.</p>
<a href="#" class="specialty-content__btn"><span>Подробнее</span></a>
</div>
</div>
</div>
</div>
</div>