Align a line with the baseline of a text

Question

I have some text and a line between it. I would like that the line is align with the baseline of the text. Now to create the line I use the container border but I think this is not the right way to do it.

Here the code:

 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,600&display=swap'); body, html { margin: 0; padding: 0; font-family: 'Roboto mono', sans-serif; }.root { width: 100vw; }.container { color: black; display: flex; column-gap: 10px; width: 100%; font-size: 16px; }.second-text { color: tomato; }.line { display: flex; flex-grow: 1; border-bottom: 1px solid tomato; }

 <div class="root"> <div class="container"> <div>Etiam felis neque, suscipit aliquet elit</div> <div class="second-text">est quis</div> <div class="line"></div> <div class=>20.45</div> </div> </div>

The result is:

but the red line should be some pixel above, aligned with the baseline of the text.

Answer 1

You can solve your problem by giving your container the below property:

align-items: baseline;

Answer 2

Add align-items: baseline; to the.container class

 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,600&display=swap'); body, html { margin: 0; padding: 0; font-family: 'Roboto mono', sans-serif; }.root { width: 100vw; }.container { color: black; display: flex; column-gap: 10px; width: 100%; font-size: 16px; align-items: baseline; }.second-text { color: tomato; }.line { display: flex; flex-grow: 1; border-bottom: 1px solid tomato; }

 <div class="root"> <div class="container"> <div>Etiam felis neque, suscipit aliquet elit</div> <div class="second-text">est quis</div> <div class="line"></div> <div class=>20.45</div> </div> </div>