Creating padding in grids and still equal heights - html

Question

I've created a grid banner where I'm trying to implement a padding between the columns.
However, when I do this it seem to mess up the heights. How can I do this without messing up heights?
As you can see if you add following code in a html doc, the item normal-size will be bigger than the double-size column. I've applied padding on column-small-1, column-small-2, normal-size and double-size, but as you can see it does not seem to align properly?
.wrapper {
width: 100%;
height: auto;
}
.item {
float: left;
}
.double-size {
box-sizing: border-box;
width: 66.6666%;
height: auto;
padding-right: 8px;
}
.normal-size {
box-sizing: border-box;
width: 33.3333%;
height: auto;
padding-left: 8px;
}
.double-size .column-big {
box-sizing: border-box;
width: 100%;
height: auto;
}
.normal-size .column-small-1 {
box-sizing: border-box;
width: 100%;
height: auto;
padding: 0px 0px 8px 0px;
}
.normal-size .column-small-2 {
box-sizing: border-box;
width: 100%;
height: auto;
padding: 8px 0px 0px 0px;
}
.column-content {
position: relative;
overflow: hidden;
}
.column-content .meta-info-doub {
box-sizing: border-box;
position: absolute;
height: auto;
width: 100%;
bottom: 0;
right: 0;
padding: 40px;
}
.column-content .meta-info-norm {
box-sizing: border-box;
position: absolute;
height: auto;
width: 100%;
bottom: 0;
right: 0;
padding: 20px;
}
.title-double {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.title-normal {
font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.date-double {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.date-normal {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.column-content .content-image {
height: auto;
width: 100%;
background-size: 100%;
display: block;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.column-content .content-image:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
<div class="wrapper">
<div class="item double-size">
<div class="column-big">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-doub">
<h3 class="date-double">23. Oktober 2015</h3>
<h3 class="title-double">Post2</h3>
</div>
</div>
</div>
</div>
<div class="item normal-size">
<div class="column-small-1">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title">
<h3 class="title-normal">Post 3</h3>
</div>
</div>
</div>
</div>
<div class="column-small-2">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title">
<h3 class="title-normal">Post1</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Can you fix the height of the row? If not, the best I can think of is having your two .item vertically align correctly. Which I would do by adding:
.item {
display:inline-block;
vertical-align:middle;
}
And removing the float:left that was previously on .item. This will also require you remove the whitespace between the closing and opening tags of two .items or apply one of the other techniques for inline-block gaps mentioned "How to remove the space between inline-block elements?".
Edit: There is probably a flexbox based solution if you can restrict your support to quite modern browsers.
Edit: http://jsfiddle.net/a2q3rr30/ is the flexbox solution linked below. It uses a combination of flex, a position absolute trick for container sizing and css object-fit to produce the effect. I've used the technique before and it works well across IE, FF and modern WebKit implementations though some of those might require some vendor specific prefixes to be added.