Vertical-center text next to image only if short text

Issue

I'd like to vertically align a text next to an image. The text can be short or long – and with responsivity in mind, the parent container can also shrink.

But I personally find that the image should not be centered next to long text. That doesn't look good.

This is a mockup of what I want.

.parent {
    display: block;
    background-color: tan;
    width: 300px;
}

.parent + .parent {
    margin-top: 0.25rem;
}

.text {
    display: inline-block;
    width: 150px;
}

.image {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0;
}


.parent.a .image {
    vertical-align: middle;
}

.parent.b .image,
.parent.c .image {
    vertical-align: top;
}

.parent.b .text {
    margin-top: 25px;
}

<div class="parent a">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">You are sweet</span>
</div>
<div class="parent b">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">Lorem ipsum dolor sit amet, dogs are cute and cats are great</span>
</div>
<div class="parent c">
    <img class="image" src="https://placekitten.com/100/100/" />
    <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ex elit, sed congue tortor ullamcorper et. Mauris ante diam, fermentum at ultrices sit amet, dapibus id libero. Phasellus aliquam arcu sed elit pulvinar rutrum. Nam in sem faucibus, aliquam augue ac, posuere massa.</span>
</div>

Solution

I've looked into flexbox … All the align-items options didn't satisfy me, but you can still achieve it with margin-top/bottom: auto on the text element.

.parent {
    display: inline-flex;
}

.text {
    margin-top: auto;
    margin-bottom: auto;
}

Demo

Answered By - WoodrowShigeru