Bootstrap 4 alignment div in line and top border

Question

I want to align both the image and the div. I also want the top of the image and div to be aligned as well. This is what I still have

<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
    <div class="comment-header">
        <span>title</span>
    </div>
    <blockquote>comment</blockquote>
</div>

I tried the d-inline-block class and it comes close to what I'm looking for, but I need the text to be at the top.

You can see here: http://www.bootply.com/zpj12TL4wI

Answer 1

Bootstrap 4 includes a utility class: align-top. No extra CSS required ...

<div>
    <img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
    <div class="comment d-inline-block align-top">
        <div class="comment-header">
            <span>title</span>
        </div>
        <blockquote>comment</blockquote>
    </div>
</div>

http://www.bootply.com/wtAOA1JPn1

Answer 2

Just changing the vertical alignment is what you need:

.comment {
    vertical-align: top;
}