achieve 3 images exact size CSS - css

Question

So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}

Answer 1

I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>