Align a line with the baseline of a text

whitecircle 0
Viewed 32

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:

enter image description here

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

css html
2 Answers

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

align-items: baseline;
Sadegh Rastgoo0

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>

Rizeen0
Related