CSS: Profile Picture Align - html

Question

I have a problem aligning the profile picture in a chat. The profile picture should always be right beside the username like demonstrated in the picture below.
How can I fix this? Been sitting hours trying to fix this, I know there are some smart people out there that can solve this in no time.
Im not the best at css. Code below:
jsfiddle.net/cefes3au/2/

Answer 1

Solution: align-items: center; Should be align-items: flex-start:
REF:
The align-items property is a sub-property of the Flexible Box Layout module.
REF: https://css-tricks.com/almanac/properties/a/align-items/
<div id="chat" class="row chat" style="height: 50%; margin-bottom: 0px; overflow-y: scroll; overflow-x: hidden;">
<!--IGNORE: CORRECT MESSAGES -->
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey;">This is my first message.</p>
</div>
</div>
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey;">This is my second message.</p>
</div>
</div>
<!-- END HERE -->
<!--PROBLEM STARTS HERE-->
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey; max-width: 225px; word-wrap: break-word;">READ: The profile picture to the left should be right beside the username at the top and not vertically centered to the div. It should look like the other messages above.</p>
</div>
</div>
<!--PROBLEM END HERE-->
</div>

Answer 2

Your CSS as-is doesn't tell the image to go to the top. Depending on your needs, you may be able to use absolute and relative positioning. One simple method is by adding the following CSS:
.chat-content {
position: relative;
}
.responsive-img {
position: absolute;
top: 2px;
}
.chat-message {
margin-left: 40px;
}

Answer 3

In the div class="col s12 chat-content" element, you had align-items: center, which, while a great default for most things where you need a flexbox, it does what it says on the tin can: it aligns everything within the flexbox to be centered on the cross-axis, whereas you want things aligned to the top.
There are three ways you can fix this:
Switch align-items to stretch: this will take up the full height, if you need further decoration or backgrounds within the elements to be aligned properly
Switch align-items to flex-start: this will solve your problem by aligning the profile picture to the top, as you asked though it will not take up the full height
Remove align-items entirely, because it defaults to flex-start. Clean code is usually seen as better than not, I'd argue.
Here's a great resource on flex-boxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/