How to align content of a div to the bottom

Answer 1

Here is another solution using flexbox but without using flex-end for bottom alignment. The idea is to set margin-bottom on h1 to auto to push the remaining content to the bottom:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

  
Header title
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)

We can also do the same with margin-top:auto on the text but in this case we need to wrap it inside a div or span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

  
Header title
  Header content (one or multiple lines)