Baseline of vertically stacked elements - html

Question

I have a container of vertically stacked elements.
<div>
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
I want the baseline of the container to be identical to the baseline of a specific one of its elements, let's say the third one. It should look like this:
How can I do this with CSS?
As a related question, how is the baseline of such container of vertically stacked elements usually defined?
I want to give this container a property display: inline-block. This container appears next to other elements on a line, and I want them to be aligned according to the baseline.

Answer 1

This makes the baseline of the container coincide with the baseline of the third child div.
.container > div:nth-of-type(3) ~ div {
float: left;
clear: both;
}
Examples:
.container {
display: inline-block;
background: yellow;
padding: 0 0.5em;
width: 8em;
}
.b1 > div:nth-of-type(1) ~ div {
float: left;
clear: both;
}
.b2 > div:nth-of-type(2) ~ div {
float: left;
clear: both;
}
.b3 > div:nth-of-type(3) ~ div {
float: left;
clear: both;
}
.b4 > div:nth-of-type(4) ~ div {
float: left;
clear: both;
}
.container > div:nth-of-type(1) {
font-size: 14px;
}
.container > div:nth-of-type(2) {
font-size: 16px;
}
.container > div:nth-of-type(3) {
font-size: 24px;
}
.container > div:nth-of-type(4) {
font-size: 20px;
}
<div class="container b1">
<div>baseline</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
<div class="container">
Lorem ipsum dolor sit amet
</div>
<div class="container">
consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<hr>
<div class="container b2">
<div>line 1</div>
<div>baseline</div>
<div>line 3</div>
<div>line 4</div>
</div>
<div class="container">
Lorem ipsum dolor sit amet
</div>
<div class="container">
consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<hr>
<div class="container b3">
<div>line 1</div>
<div>line 2</div>
<div>baseline</div>
<div>line 4</div>
</div>
<div class="container">
Lorem ipsum dolor sit amet
</div>
<div class="container">
consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<hr>
<div class="container b4">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>baseline</div>
</div>
<div class="container">
Lorem ipsum dolor sit amet
</div>
<div class="container">
consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>

Answer 2

If I understand your question correctly, something like this could work:
body {
line-height: 18px; /* set a line height and use it to calculate the offsets later */
}
div {
position: relative;
display: inline-block;
vertical-align: baseline;
background: black;
color: white;
}
div > div {
display: block;
}
div.align-1 > div:nth-child(2) {
position: absolute;
bottom: -18px; /* 1 x line-height of parent */
}
div.align-1 > div:nth-child(3) {
position: absolute;
bottom: -36px; /* 2 x line-height of parent */
}
div.align-1 > div:nth-child(4) {
position: absolute;
bottom: -54px; /* 3 x line-height of parent */
}
div.align-2 > div:nth-child(3) {
position: absolute;
bottom: -18px; /* 1 x line-height of parent */
}
div.align-2 > div:nth-child(4) {
position: absolute;
bottom: -36px; /* 2 x line-height of parent */
}
div.align-3 > div:nth-child(4) {
position: absolute;
bottom: -18px; /* 1 x line-height of parent */
}
Text
<div class="align-1">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
more text
<br>
<br>
<br>
<br>
<hr />
<br> Text
<div class="align-2">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
more text
<br>
<br>
<br>
<hr />
<br> Text
<div class="align-3">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
more text
<br>
<br>
<hr />
<br> Text
<div class="align-4">
<div>line 1</div>
<div>line 2</div>
<div>line 3</div>
<div>line 4</div>
</div>
more text
<br>
<hr />
If you are using sass or less you could make it in a dynamic mixin that would work on variable element count.