How to get the text box on the right under the picture - php

Question

As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>

Answer 1

use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using