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

You can add the height for p tag based on maximum character inside any column.

You also use col-xs-* instead of col-sm-* for very small display size support.

#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;
    float: top;

}
.p-text{
     height:500px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="row" id="content_row">
		<div class="col-xs-4" id="content_col"><h3>Test</h3>
			     	<p class="p-text">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-xs-4" id="content_col"><h3>Test2</h3>
			      	<p class="p-text">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-xs-4" id="content_col"><h3>Test3</h3>
			      	<p class="p-text">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 2

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

Answer 3

Yes you can do this but you have to use flex-boxfor this. Give each column the property of display: flex; and set it's direction to flex-direction: column. Wrap the text in an extra div and give it the property of flex-grow: 1. To wrap it up:

HTML

<div class="row">

  <div class="col col-md-4">…</div>     

  <div class="col col-md-4">
    <div class="text">
     <p>Text …</p>
    </div>
    <img src="path/to/img">
  </div>

  <div class="col col-md-4">…</div>     

</div>

CSS

.row {
  display: flex;
  flex-direction: column;
}

.text {
  flex-grow: 1;
}