Equal height in table columns

Question

I am working on a team member page and so far I have managed to get the team members info and their title columns to be the same height using tables.

Now, I am trying to get each team member sections to be the same height too but I am having real trouble.

The basic html is:

<div class="team-item-wrapper">

        <div class="team-item">

           <div class="left-column">

                <div class="team-image"></div>

                <div class="team-excerpt"><?php the_content(); ?>
                </div>

            </div><!--/ Left Column -->

            <div class="right-column">
                <div class="inner">
                    <h2 class="team-title"></h2>
                    <div class="divider"</div>
                    <div class="team-position"></div>
                </div><!--/ Inner -->
            </div><!--/ Right Column -->

        </div><!--/ Team Item -->

    </div><!--/ Team Item Wrapper -->

The CSS is:

.team-item-wrapper{
    padding: 0px 40px 20px 0px;
    display: table;
    width:50%;
    float:left;}

.team-item .left-column{
    width:65%;
    display: table-cell;
    padding-right:20px;}

.team-item .right-column{
    width:35%;
    display: table-cell;
    position:relative;}

.team-item .right-column .inner{
    text-align:right;
    width:100%;
    position:absolute;
    bottom:0px;
    padding: 0px 20px 20px 20px;}

I have tried a few CSS methods but these didn't seem to affect the table cells at all. I have also tried this JS:

<script type="text/javascript">
        var maxHeight = 0;
        $(".level").each(function(){
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
        }).height(maxHeight);
</script>

Would anyone suggest a method to make all columns equal height?

Update

Yes, the right and left column are equal. I mentioned I had already achieved this using tables. What I am trying to do is "team-items" the same height.

Answer 1

Add this to the $(document).ready function.

var maxHeight = function(){
  var m = 0;
  $('.team-item-wrapper').each(function(){
    if($(this).outerHeight() > m){
       m = $(this).outerHeight();
    } 
 });
 return m;
}

$('.team-item .left-column, .team-item .right-column').height(maxHeight())

Then add

vertical-align:center 

to the .left-column and .right-column classes. This will set all team items to the height of team item that has the highest height.