Css elements with the same auto height - css

Question

I would like to have a design based on the following HTML code:
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
What I am searching to do is to have two columns (the "container" divs) and to have the "title" elements all of the same height. I do not want to have a fixed height (because I do not know how long it is the title), and I'd like not to use Javascript.
Is there any css trick or css selector that is like "all .title elements have the same auto height"?
Thank you.

Answer 1

Could you try the style below and let me know if that is what you are looking for?:
<style>
.container {
display: inline-block;
width: 200px; /* change as you see fit */
/*height: 100px; change as you see fit */
margin: 10px; /* change as you see fit */
}
.image>img{
width:50px !important; /* change as you see fit */
height:50px !important; /* change as you see fit */
}
div.title{
min-height:40px !important; /* change as you see fit */
margin:10px 0 !important; /* change as you see fit */
background:#EEE !important; /* change as you see fit */
padding: 10px !important; /* change as you see fit */
}
</style>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500"/></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
Hope it helps.