How to align text blocks in height?

Question

HTML

Hello. On the site tendeal.ru , in the "For whom" block, the texts “master a new channel”, “close tasks”, “put on autopilot” move down - how can they be aligned so that they start at the top and not at different levels?

Answer 1

This effect gives you

.sec-5 .dly-kogo .col-md-4 {
    justify-content: space-between;
}

In order for the text to be at equal distance in height, do the following for the heading:

h4 {
    min-height: 4rem;
}

Well, press the buttons down to the position absolute or flex.
And the easiest way is to insert a div with the .align-self-end class before the button, and the div with the button has the .align-items-end class
like this:
instead of

<div class="btn-wrap"><a class="btn" href="#" data-toggle="modal" data-target="#exampleModal">
Это я
</a></div>
</div>

need like this:

<div class="col align-self-end">
<div class="btn-wrap align-items-end"><a class="btn" href="#" data-toggle="modal" data-target="#exampleModal">
Это я
</a></div>
</div>

then check it all on mobile just don't forget

Answer 2

You can change it like this,
do it
on flex, and you can try this way
, you can also try the option with relative positioning to the parent, absolute heading, and then you also specify padding-top as a percentage to the parent.