Using vertical align to align the text to the top of the div

Question

I'm trying to use vertical-align: top to align the text to the top of the div, but it's not working for some reason. What am I doing wrong?

#outer {
border: 1px solid black;
width: 100%;
height: 100%;
vertical-align: top;
}
img {
display: inline-block;
}
#message {
display: inline-block;
width: 50%;
}

<div id = 'outer'>
<img src = "https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
<div id = 'message'> 
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
message message message
</div>
</div>

Answer 1

You need to set vertical-align on the text element rather than the container. The vertical-align directive aligns an element within a context, it doesn't affect the element's parents.

Working Live Demo:

#outer {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}
img {
  display: inline-block;
}
#message {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

<div id='outer'>
  <img src="https://www.iscattered.com/uploads/7195c3cfadac848470ae8f00c0b1e2aa4ae.jpg">
  <div id='message'>
    message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message message
    message message message message
  </div>
</div>