CSS Text Align Bottom of Container

Question

I have a header which has a large image floated on one side, and a small paragraph of text on the other side. I want the paragraph to start at the bottom of the header div.

Answer 1

A more modern approach would be the usage of flexbox, that vastly eases the responsive work afterwards.

As flexbox free space distribution is managed with auto margins, you simply have to do the following :

• Set the parent to a flex display
• Tell that you want the parent to distribute its children in a column layout (top to bottom)
• Apply a margin-top: auto; to the element that you want to stick at the bottom, flex will apply all the free space above

#container {
    background: #eaeaea;
    height:180px;
    display: flex;
    flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}

    
Container content
    

        This flex content will stay at the bottom!