CSS grid or flexbox for aligning image and text - html

Question

I want to make sure the image and the text in the columns are aligned to the bottom of the image and the top of the text. Does anybody know how to achieve this without explicitly setting the height of .c-grid__content to 200px?
Right now I'm using flexbox. Maybe css-grid is the answer?
Please take a look at this codepen: https://codepen.io/simoncoudeville/pen/VMZmVa?editors=1100#0.
p {
margin-bottom: 10px;
font-family: sans-serif;
}
img {
max-width: 100%;
margin-bottom: 10px;
}
.c-grid {
padding: 40px 20px;
display: flex;
}
.c-grid__item {
flex-basis: 100%;
margin: 0 20px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
}
.c-grid__picture {
width: 100%;
}
.c-grid__content {
display: flex;
flex-direction: column;
}
<div class="c-grid">
<article class="c-grid__item">
<div class="c-grid__picture">
<img src="http://via.placeholder.com/400x200">
</div>
<div class="c-grid__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto!</p>
</div>
</article>
<article class="c-grid__item">
<div class="c-grid__picture">
<img src="http://via.placeholder.com/400x600">
</div>
<div class="c-grid__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="c-grid__item">
<div class="c-grid__picture">
<img src="http://via.placeholder.com/400x400">
</div>
<div class="c-grid__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ratione commodi corrupti itaque sed architecto! </p>
</div>
</article>
</div>

Answer 1

Align-items: baseline on the flexbox container seems to do the trick in this case. See the solution here: https://codepen.io/simoncoudeville/pen/yzOvmN?editors=1100

Answer 2

Looking at your codepen, this doesn't appear to require responsive design. If I am correct in that assumption, why not use a table that separates the images and text by rows, vertically aligning the top row at the bottom and the bottom row at the top?
It would limit the important CSS to just a few lines:
.c-grid__picture {
vertical-align: baseline;
}
.c-grid__content {
vertical-align: top;
}
Here is an example in JSFiddle

Answer 3

I was able to achieve this setting the flex-basis of the .c-grid__content to 0.
.c-grid__content {
...
flex-basis: 0;
}
https://codepen.io/antibland/pen/WZrXpw?editors=1100