How to manipulate flex properly so that it turns out like on the screen?

Question

css

Page merkury-vd.ru/contacts
Here on the screen is a block where I had an email and a phone number in each line on the same level, I have already broken my head how to align them.

Answer 1

Set the card container to:

.card {
  display: flex;
  flex-direction: column;
}

You can implement the phone number and mail address with p or a. And the indents on the left / right / top through the classes that you assign to the elements with the phone and mail.
Or show an example of your code in which it doesn’t work - it will be easier to help.

Answer 2

Something like this: https://jsfiddle.net/ucu5hkj5/ if it's flex.
If the e-mail does not fit on one line, then the designer's idea will crumble, but this is the designer's problem. Or crop it with text-overflow. Or change the font size of the e-mail'a, so that it always fits into 1 line, then you can get rid of the min-height, but js will be added.