CSS align text and image

Question

I have a div with 3 columns. In each div I have a text and an image. Is it possible to align the images on the same hight? Now the image is below the text, but the text length differs for each column. I'd like to have the images in the bottom of each column.

Thanks,

Carolin

#content_row{
    margin-top:150px;
    margin-left:10px;
    margin-right:10px;

}

#content_col{
    -webkit-transform: scale(0.8);
     transform: scale(0.8);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     padding-bottom: 30px;



}
#content_col:hover{
    -webkit-transform: scale(1);
 	transform: scale(1);
     -moz-box-shadow:    0 0 50px black;
     -webkit-box-shadow: 0 0 50px black;
     box-shadow:         0 0 50px black;
}

.tile-img{
    max-width: 100%;
    margin-left: auto;
    margin-right:auto;
    vertical-align: bottom;

}

<div class="row" id="content_row">
		<div class="col-sm-4" id="content_col"><h3>Test</h3>
			     	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
			        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
		</div>
	  	<div class="col-sm-4" id="content_col"><h3>Test2</h3>
			      	<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
		</div>
	  	<div class="col-sm-4" id="content_col"><h3>Test3</h3>
			      	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			        <img src="https://cdn.pixabay.com/photo/2017/11/05/21/45/balloon-2921973_960_720.jpg" class="tile-img">
	    </div>
	</div>

Answer 1

Try this:

/* CSS used here will be applied after bootstrap.css */

#content_row {
  margin-top: 150px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;           /* add the following 2 styles */
  flex-direction: row;
}

#content_row>.col-sm-4 {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  padding-bottom: 30px;
  flex-grow: 1;                       /* add this to make the column grow to the height of the row */
  display: flex;
  flex-direction: column;
}

#content_row>.col-sm-4>p {
  flex-grow: 1;               /* add this to make the p take up all remaining space */
}

Example bootply

You will also note that I have removed your ids from your columns - ids are meant to be unique