csslayout/contents/media-object.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Media object	Create a media object with CSS flexbox	css flexbox, media object

HTML

<div class="media-object">
    <!-- Media object -->
    <div class="media-object__media">
        ...
    </div>
    <!-- Main content -->
    <div class="media-object__content">
        ...
    </div>
</div>

CSS

.media-object {
    /* Align sub-items to top */
    align-items: start;
    display: flex;
}

.media-object__media {
    margin-right: 0.5rem;
}

.media-object__content {
    /* Take the remaining width */
    flex: 1;
}

{% demo %} {% include "patterns/media-object.njk" %} {% enddemo %}