How to get text to fit underneath each image in waterfall layout using CSS (column-count)?

Question

Here is an image of my current situation:

image of my situation

As you can see, the text "Test 2" should be underneath the bottom left image.

I'm using column-count to create this waterfall effect. I do not know how to control it any farther than the default behavior. I've tried many things but the text refuses to sit underneath that bottom left image.

Here is my HTML:

        <div id="front-items">
            <?php
            foreach($products as $product){
            ?>
            <div class="product-item">
                <div class="product-image">
                    <img src="<?php echo $image_url; ?>">
                </div>
                <div class="product-title"><?php echo "Test ".$i; ?></div>
            </div>
            <?php
                $i++;
            ?>
            <?php
            }
            ?>
        </div>

Here is my relevant CSS:

#front-items {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    column-count: 2;
    column-gap: 5;
    height: auto;
}

.product-item {
    height: auto;
    margin-bottom: 10px;
}

.product-image {
    width: auto;
}

.product-image img {
    max-width: 100%;
    border-radius: 15px;
}

.product-title {
    text-align: left;
}

I watched a video of someone implementing a waterfall layout with lots of text underneath his images and have copied what he did exactly but with no luck.

Answer 1

For anyone else stuck on this, here's the correct answer:

Put this in the styling for your items inside the holder div:

break-inside: avoid-column;