Vertical Align Side by Side Divs

It is very common need to vertically align two elements with unknown heights in a div or vertical align side by side divs. With this approach, you can design a modern layout of WordPress theme or it may be other requirement of your web design project.


Here we are going to share an easy and cross browser CSS solution of this need.

CSS Code

We have highlighted the main concept in the CSS code.

.div-one {
	display: inline-block;
	margin: 0 15px 0 0;
	vertical-align: middle;
	width: 350px;
.div-two {
	display: inline-block;
	vertical-align: middle;
	width: 430px;


Here is a practical approach of this need that how can you use this in the designing of a WordPress theme post layout.

[codepen_embed height=”525″ theme_id=”0″ slug_hash=”KVKYoq” default_tab=”result” user=”wpflask”]See the Pen Vertical Align Side by Side Divs by WPFlask (@wpflask) on CodePen.[/codepen_embed]