Align the bottom of a child element with the parent's baseline - css

Question

I would like to vertically align a child element in a flex box (or text box) so that its bottom coincides with the baseline of its siblings.
This happens by default for images:
MDN <img> Element:
<img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.
Can I achieve the same effect with a <div> instead of an <img>?
Later edit: I'm attaching a snippet. I want the bottom border of the last child to coincide with the bottom border of the image (the baseline of the rest of the children). I don't want everything aligned to the bottom.
.parent {
display: flex;
align-items: baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
Later edit 2. A picture is a thousand words. Hope it helps clarify what kind of alignment I need. Notice how letters j, p, and q extend below the baseline.

Answer 1

Finally, I found a solution:) It was hidden somewhere in the CSS specification:
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
This is taken from https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align, bottom of the page.
So, in order to move its baseline to the bottom margin edge, you only have to add display: inline-block and overflow: hidden (or anything other than 'visible', eg: 'auto') to the child element:
body {
font-size: 200%;
}
.bottom {
display: inline-block; /* <--- this */
overflow: hidden; /* <--- and this */
width: 10rem;
border: 2px solid orange;
padding: 2rem;
}
<div>
<span>text jklmnopqr</span>
<div class="bottom">div with bottom on the baseline</div>
</div>

Answer 2

So I have not found a good solution for your question, but I give you what I've tried, maybe it will give you some ideas.
Apparently, the baseline alignement with flexbox only align the text content as you want, not the div itself.
.parent {
display: flex;
align-items: last baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
But an empty div will be aligned on baseline ?
.parent {
display: flex;
align-items: baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
width:50px;
height:50px;
background-color: #fdd;
border-bottom: 1px solid red;
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom"></div>
</div>
I have tried solutions with absolute positionning, but you are forced to define the size of the parent, which is not a good solution...
The best solution I found is, I think, to align the text with flexbox, then translate the block with the size of your padding... I hope it helps you a little bit...
.parent {
display: flex;
align-items: last baseline;
}
.child2 {
font-family: monospace;
font-size: 200%;
}
img {
border-bottom: 1px solid red;
}
.child-bottom {
padding: 5px;
background-color: #fdd;
border-bottom: 1px solid red;
transform:translateY(-10px);
}
<div class="parent">
<span>These</span>
<span class="child2">are</span>
<span>baseline</span>
<img src="https://cdn.sstatic.net/Img/ico-binoculars.svg?v=d4dbaac4eec9">
<span>aligned.</span>
<div class="child-bottom">This child's bottom border should be on the baseline of the parent.</div>
</div>
Another solution would be to align everything with flex-end so that every child are aligned at bottom but I guess it is not what you want as you said already.

Answer 3

I created a simplest example.
.parent{
display: inline-flex;
flex-direction: row;
align-items: flex-end
}
.child{
background: red;
color: white;
width: 50px;
height: fit-content
}
<div class='parent'>
<div class='child'>some text</div>
<div class='child'>some more text</div>
<div class='child'>some more more more more more more more more text</div>
</div>