Say I have the following CSS and HTML code:
The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text...
into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}
Header title
Some text aligns to the bottom
If there is only some text and you want to align vertically to the bottom of the container.
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}
Some text aligns to the bottom