Place text underneath product images WooCommerce - wordpress

Question

I am attempting to add text beneath the product gallery images of my Wordpress Woo-commerce site.
I have attempted to use the general scripts found online:
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
function bbloomer_add_below_prod_gallery() {
echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em">';
echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
echo '</div>';
}
You can see in the following screenshot that the text appears here and not beneath the actual image
The website link this is referencing can be found at: https://www.tattiniboots.com/product/retriever/
Update:
After trying the proposed solution below, the div text shows all the way at the bottom:
I am attempting to get this div to appear here:
The link I am working at is found here: https://www.tattiniboots.com/product/terranova/

Answer 1

You need to add style clear:both in your div. check the below code.
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
function bbloomer_add_below_prod_gallery() {
echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em; clear:both;">';
echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
echo '</div>';
}