Flex-box display children divs side by side

Question

I have a .content-container div that is set to display: flex , and children divs ( .message-body, .message-action ) that I want to show side by side, with the .message-action div floating to the right.

Here is what I am working off of: https://codepen.io/anon/pen/ZRZKdZ

As you can see, the .message-action div seems to be below the .message-body div.

Answer 1

You need to use flex-direction:row and not column on the container if you want them side-by-side ( read https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more on this property ).

( also remove the float:right )

Updated pen: https://codepen.io/anon/pen/qKwjNa