How to manipulate Ohm flex'what would have happened as in the screenshot?

5a71aac45abb9582310452.png

Page merkury-vd.ru/contacts

Here on the screen unit where e-mail and phone number in each row at one level, I already a head broke how do I get them to align.
June 8th 19 at 17:27
2 answers
June 8th 19 at 17:29
Container card ask:
.card {
 display: flex;
 flex-direction: column;
}

Phone number and email address may implement using p or a. And the padding on the left / right / up through the classes assigned to the items by phone and mail.

Or show me an example of your code that does not work — it will be easier to help.
I left a link to the page where these cards are - Isom.Hu commented on June 8th 19 at 17:32
add
.contacts__person .person__item.proect1 {
 align-items: flex-start;
}

Everything will be fine, but then everything rests on the fact that you have different height blocks .prof - sid.Koepp80 commented on June 8th 19 at 17:35
odd it doesn't come out, we do not like on the screenshot - Isom.Hu commented on June 8th 19 at 17:38
because then you have handles to specify the indentation of the right elements, I think. Look at the screenshot, in identical blocks with the header in 2 lines with different indentation are indicated. This is a designer question, why so it was positioned. - sid.Koepp80 commented on June 8th 19 at 17:41
Yes designer*****, he painted and how to do it not his business as he says - Isom.Hu commented on June 8th 19 at 17:44
then assigned the desired item in a separate class (or via nth-child realize) and just move it. - sid.Koepp80 commented on June 8th 19 at 17:47
shouldn't , each card is generated and the top is select for sample - Isom.Hu commented on June 8th 19 at 17:50
as ideas: the biggest title of the card you have in 5 lines. Set the styles for the other cards, so they were the same size as the card title in 5 lines and then everything else will be easier to style. - sid.Koepp80 commented on June 8th 19 at 17:53
June 8th 19 at 17:31
Something like this: https://jsfiddle.net/ucu5hkj5/ if it is the Flex.
If e-mail does not fit on one line, the designer's idea will fall apart, but it challenges the designer. Or crop it using text-overflow. Or to change font size e-mail, so that always fit in 1 line, then you can get rid of min-height, but will increase js.
Well, that space between worked if not a multiple of 4 number of blocks, it is necessary to add empty, but a common practice. - Isom.Hu commented on June 8th 19 at 17:34

Find more questions by tags FlexboxCSS