Use flexbox display to align items within a row wrapper

Question

I hope this is possible.

I have a flexbox wrapper, each item inside the container features a card where I want to align items inside the card so they align with the other items.

Here is a diagram to try and explain.

So each card has a product image which could be different dimensions. A heading, product description and a CTA.

The product images should be aligned to the bottom of the container (using flex-end). Heading should always be at the same point for each card, description also but this can be a variable length. And the CTA should always be bottom aligned.

Some basic markup:

<div class="container">
    <div class="flexRow">
        <div class="flexCell">
            <div class="productImage">
                ...
            </div>
            <div class="productDetails">
                ...
            </div>
            <div class="productCTA">
                ...
            </div>
        </div>
    </div>
</div>

CSS:

.container {
   display: flex;
}

.flexRow {
    display: flex;
    flex-wrap: wrap;
}

.flexCell {
    display: flex;
    margin: 10px;
    padding: 10px;
    background: orange;
    flex-direction: column;
}

.productImage {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
    flex-grow: 1;
}

.productDetails {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.productCTA {
    display: flex; /* this seems to be the only bit that is working. */
    justify-content: center;
}

I am wondering if I have to create separate rows for the product images, headers, cta's, as currently my guess is that there is no relationship between the product images as they are nested inside a parent container. I hope this is a relatively easy fix.

I have tried iterating over this, adding or removing flex: 1, flex-grow: initial, etc. but to no avail.

JSFIDDLE here