Align text styled with line-height

Question

Is there a way to align text that has the line-height property ? border-box doesn't seem to help, since css is counting the lineheight as part of the actual font. I tried using negative offsets, but those don't seem to do much.

I am currently using flexbox for all of the layout.

The layout

+-----------------------------------------------------------------------------------------------------------+
|                                                                                                           |
| +-----------------------------------+                                                                     |
| |                                   |                                                                     |
| |  Title                            |                                                                     |
| |                                   |                                                                     |
| +-----------------------------------+                                                                     |
|                                                                                                           |
| +-------------------------------------------------+  +-----------------------------------------------+    |
| |                                                 |  |                                               |    |
| | Image                                           |  | Text                                          |    |
| |                                                 |  |                                               |    |
| |                                                 |  |                                               |    |
| |                                                 |  |                                               |    |
| |                                                 |  |                                               |    |
| |                                                 |  |                                               |    |
| |                                                 |  |                                               |    |
| |                                                 |  +-----------------------------------------------+    |
| |                                                 |                                                       |
| |                                                 |                                                       |
| |                                                 |  +------------+                                       |
| |                                                 |  |   button   |                                       |
| +-------------------------------------------------+  +------------+                                       |
|                                                                                                           |
|                                                                                                           |
+-----------------------------------------------------------------------------------------------------------+

The offset

Css (EmotionJs for React)

<div css={{
        display: 'flex',
        flexWrap: 'wrap',
    }}>
    <Img
        customCss={{
            backgroundPosition: ['center', 'bottom'],
            flexGrow: 1,
        }}
    />
    <div
        css={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            justifyContent: 'space-between',
        }}>
        <div
            css={{
                lineHeight: '1.5em',
            }}>
            {text}
        </div>
        <a>Button</a>
    </div>
</div>

Solutions :

Found a selector that can remove line-height from the first line, but that messes with the spacing for the second line

Answer 1

You can disable the line height for the first line using ::first-line but it will also affect the distance between the first and second line, so that's not good.

The best you can do is add a negative top margin to the child element using em, so in case you have different text-sizes it should be still work.

.c, .c > div {
  background: gainsboro;
  display: flex;
}
.c > div > div {
  line-height: 1.5;
  margin-top: -.35em;
  padding-left: 1em;
}

<div class="c">
    <img src="https://i.sstatic.net/tRC02.png">
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique dui erat, in cursus nibh dapibus et. Nulla efficitur vestibulum vestibulum. Integer lacinia laoreet mattis. Sed mattis, magna in mollis sagittis, purus enim varius ligula, id eleifend felis massa at leo. Maecenas dapibus nunc nec ullamcorper euismod. Etiam odio elit, tempus ac diam eu, efficitur mollis lectus. Morbi efficitur mollis metus, malesuada varius diam pharetra a. Maecenas id turpis non est pulvinar suscipit. Nullam fringilla lectus in dui dapibus scelerisque.</div>
    </div>
</div>