Equal height images within different columns - html

Question

I have 4 columns and in each column there is an image and a text part. The image height/widths are different for each column. The text length is different for each column. I want the images to all be the same height and the width to be proportionate to the image itself. Also, I want the text to start at the same vertical point for each column.
What I want:
What I get:
<div class="container">
<div class="row">
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
<p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
<p>Etiam feugiat in nulla sit amet congue. </p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
</div>
</div><!-- end -row -->
</div>
Codepen: https://codepen.io/danielgetsthis/full/mXepew

Answer 1

I don't know ecatly if is that what you want, but please, run the snippet and tell me (maybe would be better if you open the snippet in fullscreen, because the window here is too small)
.img-fluid{
width: 75%;
min-height: 50px;
margin: auto;
margin-bottom: 10px;
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
<p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
<p>Etiam feugiat in nulla sit amet congue. </p>
</div>
<div class="col text-justify">
<img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
</div>
</div><!-- end -row -->
</div