How to make the same height for multiple or three sub child of child div?

Question

I have a product grid in ul li structure and I need to do three sub children of children div the same height with dynamic content, I tried flexbox CSS and Gridbox CSS but was not able to fix it. I added my code in the below snippets. I need to do all child div red, green and blud div in the same height.

ul {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, calc(25% - 10px));
}

li {
background: #ccc;
padding: 15px;
display: grid;
}

.product-item-info {
display: contents;
}

.product-item-top {
display: flex;
padding: 50px 0;
font-family: Arial, Helvetica, sans-serif;
background: #ccc;
justify-content: center;
background:yellow;
}

.product-item-info {
display: contents;
}

.product.details.product-item-details {
grid-row-start: 2;
display: grid;
}

.product-item-inner {
display: contents;
}

.height2 ul {
display: block;
}

.height2 ul li {
padding: 0;
margin: 0;
background: transparent;
width: 100%;
}

.height1 {
background: red;
padding: 5px;
grid-row-start: 1;
}

.height2 {
background: green;
padding: 5px;
grid-row-start: 2;
}

.height3 {
background: blue;
padding: 5px;
grid-row-start: 3;
}

<ul class="products list items product-items flex-grid">
    <li class="item product product-item">
        <div class="product-item-info">
            <div class="product-item-top">
                <h5>Placeholder Image</h5>
            </div>
            <div class="product details product-item-details">
                <div class="product-item-inner">
                    <div class="height1">
                        <h1>This is heading</h1>
                        <p>Subtitle</p>
                    </div>
                    <div class="height2">
                        <ul>
                            <li>List Item 1</li>
                            <li>List Item 2</li>
                            <li>List Item 3</li>
                        </ul>
                    </div>
                    <div class="height3">
                        <p>1.00 USD</p>
                        <button>Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="item product product-item">
        <div class="product-item-info">
            <div class="product-item-top">
                <h5>Placeholder Image</h5>
            </div>
            <div class="product details product-item-details">
                <div class="product-item-inner">
                    <div class="height1">
                        <h1>This is heading</h1>
                        <p>Subtitle</p>
                    </div>
                    <div class="height2">
                        <ul>
                            <li>List Item 1</li>
                            <li>List Item 2</li>
                        </ul>
                    </div>
                    <div class="height3">
                        <p>1.00 USD</p>
                        <button>Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="item product product-item">
        <div class="product-item-info">
            <div class="product-item-top">
                <h5>Placeholder Image</h5>
            </div>
            <div class="product details product-item-details">
                <div class="product-item-inner">
                    <div class="height1">
                        <h1>This is heading</h1>
                        <p>Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle
                            Subtitle
                            Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle.
                        </p>
                    </div>
                    <div class="height2">
                        <ul>
                            <li>List Item 1</li>
                        </ul>
                    </div>
                    <div class="height3">
                        <p>1.00 USD</p>
                        <button>Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="item product product-item">
        <div class="product-item-info">
            <div class="product-item-top">
                <h5>Placeholder Image</h5>
            </div>
            <div class="product details product-item-details">
                <div class="product-item-inner">
                    <div class="height1">
                        <h1>This is heading</h1>
                        <p>Subtitle</p>
                    </div>
                    <div class="height2">
                        <ul>
                            <li>List Item 1</li>
                            <li>List Item 2</li>
                        </ul>
                    </div>
                    <div class="height3">
                        <p>Out of stock</p>
                        <p>1.00 USD</p>
                        <button>Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>