Equalise heights of columns in a row?

I’d like to equalize the height of columns in a row so I can have different backgrounds that don’t get cut off when the text is shorter on one.
Is this possible?

if you look at this screen, you’ll see the first column is shorter, it looks bad…

http://i.share.pho.to/b1343613_o.png

d

Thanks but it’s way too fluid for min height, I cannot change the clients text.
https://harvest.modus.ie/

I have also tried using table/table-cell but the way the page is constructed won’t allow for this.

This is the only work around I can come up with…

@media (min-width: 768px) and (max-width: 1024px){
.home-row1 .td-element-style {
background: #7d7d7d;
background: -moz-linear-gradient(left, #7d7d7d 0%, #767676 50%, #6e6e6e 100%);
background: -webkit-linear-gradient(left, #7d7d7d 0%,#767676 50%,#6e6e6e 100%);
background: linear-gradient(to right, #7d7d7d 0%,#767676 50%,#6e6e6e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7d7d', endColorstr='#6e6e6e',GradientType=1 );
}
}