Recently, I thought about such a standard seemingly thing as the arrangement of one text opposite another above. We need a decision on the type of what is in the example, but only so that the alignment is along the top. (Align-items: flex-start does not fit, because it does not take into account the line-height and the large text produces a non-sickly indent from the top)

PS In the right block there can be more content, like the description of something and buttons.

PPS Attached an image of what I need.

enter image description here

.row { width: 400px; height: 150px; background-color: #ccc; display: flex; align-items: baseline; padding: 5px; } .block-1 { font-size: 130px; } .block-2 .big-text { display: block; font-size: 26px; } 
 <div class="row"> <div class="block-1"> 1 </div> <div class="block-2"> <span class="big-text"> Шагов к победе </span> </div> </div>

  • I have the most logical method to use flexbox. More, css-tricks.com/snippets/css/a-guide-to-flexbox . - Nik Horse
  • @NikPashchuk Slightly redid the example. I need something like this, but only so that the alignment is relative to the top. align-items: flex-start doesn't fit - Anton Antonov
  • @AntonAntonov in general found the following css-live.ru/css/metriki-shrifta-line-height-vertical-align.html article, this question is considered in great detail, but as far as I understand there is no easy way, although there is no solution at the end to examples are available - l2banners

1 answer 1

Greetings Maybe something like that?

 .row { width: 300px; padding: 1px 5px 0 5px; display: flex; border-top: 1px solid red; border-left: 1px dashed blue; border-right: 1px dashed blue; font-family: arial; } .block-1 { display: flow-root; vertical-align: top; font-size: 130px; line-height: 0.75; text-align: right; } .block-2 { display: flow-root; vertical-align: top; } .block-2 .big-text { display: block; padding-bottom:5px; font-size: 26px; line-height: 0.8; font-weight: 600; text-align: left; } .block-2 .small-text { display: block; padding-left:2px; font-size: 16px; text-align: left; } 
 <div class="row"> <div class="block-1">1 </div> <div class="block-2"> <span class="big-text">Шагов к победе</span> <span class="small-text">Шагов к победе Шагов к победе Шагов к победе<br>Шагов к победе</span> </div> </div>

  • The option is not bad, just for alignment. But there is an important point: the opportunity to use the advantages of the flex-box is lost, therefore it is not quite universal. - Anton Antonov
  • Anton, good afternoon! Do not think for imposing, but why do you need flex? For example, I don’t like to use flex, as it were, but not everywhere it is supported yet. - LADYX
  • Flex projects that need to be edited. - Anton Antonov
  • @ Anton Antonov so? made changes - LADYX
  • Thank you for exactly what I was looking for! - Anton Antonov