Align baselines of items inside a flexbox - html

Question

I'm basically trying to get the baseline of the value to align with the baseline of the bottom unit instead of the first as it's happening in my code below.
I can get it to work if I ditch flexbox altogether but I need it for responsiveness.
The canonical advice seems to be to wrap flex items in inline-block but, as you can see from that codepen, it doesn't seem to work for me.
Here's the codepen where I've been trying stuff: https://codepen.io/jskrt/pen/OJyXxyv
.value_and_unit {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: baseline;
}
.value {
line-height: 1;
font-size: 120px;
margin-right: 10px;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
.divider {
width: 100%;
}
.inline-block {
display: inline-block;
}
<div class="value_and_unit">
<span class="value">
340
</span>
<div class="unit_container">
<span class="unit">
m
</span>
<hr class="divider" />
<span class="unit">
s
</span>
</div>
</div>

Answer 1

Try the following:
.value_and_unit {
display: flex;
/* flex-flow: row nowrap; */
/* justify-content: flex-start; */
/* align-items: baseline; */
}
.value {
font-size: 120px;
margin-right: 10px;
line-height: 1;
}
Tell me if this is the desired effect, and if not, tell me what is the problem, so I have a clue to follow. Good luck!
EDIT: Replace the <h1> tag with <div> because browsers add line-height, margin and other properties to it by default! Style the item as desired, by adding bold by yourself. Keep in mind that h1 is a semantic tag with high weight and should not be used when not required!!!
EDIT2: I forgot to mention that I worked with the code in real environment and not in the code pen and everything seemed well if I understood your problem correctly. Try it yourself in real server too, if there is a problem with the codepen.

Answer 2

If the .value element will contain numbers only, then you can probably get away with a simple adjustment to the line-height. Make it bit smaller, so that the line box shrinks-to-fit the font height.
.value_and_unit {
display: flex;
border: 1px solid red; /* demo */
}
.value {
line-height: .75; /* key adjustment */
font-size: 120px;
margin-right: 10px;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
.divider {
width: 100%;
}
<div class="value_and_unit">
<span class="value">340</span>
<div class="unit_container">
<span class="unit">m</span>
<hr class="divider" />
<span class="unit">s</span>
</div>
</div>
However, this method won't work if the .value element contains random letters, because the extra space above and below the numbers exists to accommodate descenders and ascenders.
In such case, you would need to try another method. align-items: flex-end would work (i.e. the visual baselines would be aligned), but the units would align below the numbers in this case.
.value_and_unit {
display: flex;
align-items: flex-end;
border: 1px solid red;
padding: 5px;
}
.value {
font-size: 120px;
margin-right: 10px;
border: 1px dashed blue;
}
.unit_container {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 1px dashed blue;
}
.divider {
width: 100%;
}
<div class="value_and_unit">
<span class="value">340jÁ </span>
<div class="unit_container">
<span class="unit">m</span>
<hr class="divider" />
<span class="unit">s</span>
</div>
</div>
So, because you want the "s" baseline aligned with the numbers' baseline, you're not actually seeking baseline alignment (because the true baseline of the larger box is under the "j"). You want an arbitrary alignment, so an adjustment to the line-height may be appropriate in this case.

Answer 3

Try to make the align-items value to end. It is like this
align-items: end;