float left floating elements with steps down to the right - html

Question

I am trying to create thumbnails for images in a div to appear with three columns. These elements are in a form tag. when i try to float my images which are produced with a loop they are creating a step down to the right. I tried using grid css it still gives me the same result.
sample image
image
blade file
<form action="/p/update/{{ $post->id}}" enctype="multipart/form-data" method="POST">
<div class="form-group ">
#foreach($posts as $post)
<div id="carouselExampleControls" class="carousel slide" data-interval="false">
<div class="carousel-inner">
#for($i=0; $i< count($image=$post->images()->get()); $i++)
#if($i==0)
<div class=" ">
<div class="editImages ">
<div class="img-order"> <img class="posts-img crop" src="/images/{{$image[$i]['image']}}" alt="first slide"> </div>
<div class="bottom-right"> more images </div>
</div>
</div>
#else
<div class="">
<div class="editImages">
<div class="img-order"> <img class="posts-img crop" src="/images/{{$image[$i]['image']}}" alt="first slide"> </div>
<div class="bottom-right"> more images </div>
</div>
</div>
#endif
#endfor
</div>
</div>
#endforeach
</div>
</form>
css file
.form-group{
background:brown;
}
.editImages{
display:flex;
float: left;
border: 1px solid black;
}
.editImages > div > img {
width: 7rem;
height: 7rem;
}

Answer 1

idk if I got the question right but try to add this
.editImages{
vertical-align: top;
}