Trouble with coding images side by side with php without using <div> tag in html - php

Question

My main file is a .php file, and images can be uploaded and displayed from this page. Getting those images to display in three columns has been confusing. It is usually done like this: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp with each image or images placed in div tags. three div tags if you want three columns. In my .php file, images are not written out in the code, so how do I get the images to display in three columns on the page?
I do include one div tag wrapped around the PHP code which is showing the first column.
Here is the CSS code:
.container{
}
.container .heading h3 span{
font-weight: 100;
}
.container .box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream{
flex-direction: column;
width: 32.5%;
}
.container .box .dream img{
width: 100%;
padding-bottom: 15px;
border-radius: 5px;
}
PHP code:
<div class="products-wrapper">
<div class="container">
<div class="box">
<div class="dream">
<?php foreach ($products as $product): ?>
<a href="<?=url('index.php?page=product&id=' .
($product['url_slug'] ? $product['url_slug'] : $product['id']))?
>" class="product">
<?php if (!empty($product['img']) &&
file_exists($product['img'])): ?>
<img src="<?=base_url?><?=$product['img']?>" alt="<?
=$product['name']?>">
<?php endif; ?>
<span class="name"><?=$product['name']?></span>
<span class="price">
<?=currency_code?><?=number_format($product['price'],2)?>
<?php if ($product['rrp'] > 0): ?>
<span class="rrp"><?=currency_code?><?
=number_format($product['rrp'],2)?></span>
<?php endif; ?>
</span>
</a>
<?php endforeach; ?>
</div>