html css move img to the top line of div [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
QUESTION:
I want to make it like this:
In other words, move photo to the top of its div.
Regardless of change of width of window or other, I want to make it sticky aligned to the top line.
Maybe it's so easy or noob question, but need help.
Thanks for reading.

Answer 1

Use vertical-align: 'top' to align the image to the top. Check the working snippet
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>

Answer 2

You should be use this simple trick.
Please add css like:
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
or give inline css in this class .reading_chat_text{float: left;}
Hope this help.
Let me know further clarification.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%;
float: left;">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>