How to align like on the screenshot?

How to align like on the screenshot?
something to add
and can that extra?
https://codepen.io/anon/pen/gJNVNP
5cfa91950e7d3765758864.jpeg
March 23rd 20 at 19:33
2 answers
March 23rd 20 at 19:35
Of no doubt if the markup to read.
I understand they have extra stretch vertically.
In General, the parent that contains these three lines, write display: flex; flex-direction: column align-items: center justify-content: center; And all
and each child margin-bottom: what You need
One of the ways

like flex-direction: column in some browsers it. So you can add a wrapper still
To do otherwise
<div class='1' style="dysplay:flex align-items: center justify-content:center" padding='20px 15px'>
 <div class='2'>
 <div class='text' style='margin-bottom='10px'>Grain</div>
 <div class='text' style='margin-bottom='10px'>123</div>
 <div class='text'>a year, an annual</div>
</div>
 <div/>
March 23rd 20 at 19:37
In the body to remove margin: 0; and padding: 0;. and add them to the * { }.
There are more bad advice, but rarely.

Why to reset the indentation, which then still need to ask back?
Reset only makes sense those will never be needed in the future. - Helga37 commented on March 23rd 20 at 19:40
OK. In .static__number got additional marginy top and bottom to 60px equal to the height of the text font-size: 60px;. - pietro commented on March 23rd 20 at 19:43

Find more questions by tags LayoutHTMLCSS