CSS Blocks same height with different image heights - html

Question

I'm having some trouble styling my news articles. This is preview of what I'd like to have:
On the left you always have an image (width is always the same, height isn't). On the right you have some information and a button on bottom aligned with the image.
<div id="newsItemImage">
<img src="" alt="" />
</div>
<div id="newsItemOther">
<p></p>
<button></button>
</div>
Float left on both of the divs. But the height of the two div's isn't the same. How can I make them equal?
This is what I have now:
.newsItemPic
{
width:333px;
border:1px solid black;
float:left;
height:100%;
}
.newsItemOther{
width:860px;
border:1px solid red;
float:left;
height:100%;
}
They are next to each other but the right content is not the same height as the image. So the image that's supposed to be under comes up under the content.
JSFIDDLE: http://jsfiddle.net/ZhD9Z/

Answer 1

Fiddle
as image is not responsive and it has 200px absolute width, i created one container width:500px;
then righttext must contain button itself but button must be aligned width image bottom, so righttext height equals with image height and button positioned at bottom:0
.eachNewsBox
{
padding:10px;
width:500px;
background-color:gray;
display:block;
float:left;
margin-top:20px;
}
.imgbox
{
display:block;
float:left;
height:100%;
position: relative;
}
.imgbox img
{
max-width:200px;
border:1px solid #000;
float: left;
}
.button
{
width:100px;
height:20px;
line-height:20px;
background-color:#FFF;
text-align:center;
margin-bottom:0px;
color:#000;
position:absolute;
bottom:0;
}
.rightText
{
float:right;
font-size:10px;
max-width:242px;
padding-left:10px;
color:#FFF;
height: 100%;
left:210px;
}