Vertical-align two inline-block elements

Question

I have two inline-block div elements that I'd like to vertically align. They both contain different amounts of text, but the smaller one just aligns at the bottom.

Here's my HTML:

<div class="work-item">
    <div class="image-container">
        <p></p>
    </div>
    <div class="text-container">
        <p></p>
    </div>
</div>

And my CSS:

.work-item {
    width: 100%;
    padding: 50px 0;
}

    .work-item .image-container, .work-item .text-container {
        display: inline-block;
    }

    .work-item .image-container {
        width: 33%;
    }

    .work-item .text-container {
        width: 60%;
    }

    .work-item .text-container p {
        margin: 0;
    }

You can see a JSFiddle here: http://jsfiddle.net/jedhep7x/

I've tried setting the div height to 100% and setting the vertical-align to middle, but that doesn't fix it at all.

Anyone know what I'm doing wrong here?

Answer 1

.work-item {
    width: 100%;
    padding: 50px 0;
}
.work-item .image-container,
.work-item .text-container {
    display: inline-block;
    vertical-align: middle; /* add me */
}
.work-item .image-container {
    width: 33%
}
.work-item .text-container {
    width: 60%
}
.work-item .text-container p {
    margin: 0
}

DEMO: http://jsfiddle.net/jedhep7x/1/

Answer 2

update your CSS with the below

The CSS:

.work-item {
    width: 100%;
    padding: 50px 0;
    display:table;
}

    .work-item .image-container, .work-item .text-container {
        display: table-cell;
        vertical-align:middle;
    }

You can see a JSFiddle here: http://jsfiddle.net/jedhep7x/2/