CSS Equal Height columns issue in Chrome not Safari - css

Question

I'm using linear gradients to create equal height columns. In safari everything lines up and is fluid all the way from desktop to mobile.
My setup is 2 rows each containing 2 columns each column has an image and a description box underneath. The image is responsive so scales down in size but in Safari this isn't an issue everything continues to line up i.e. the edge of the gradient column (the line where the two colours meet) is in line with the image at every break point.
However in Chrome nothing lines up when you scale down. It's fine at desktop but as soon as you view smaller screen sizes the images and the line dividing the two columns are all off.
I have searched endlessly for a solution to this problem but cant's seem to find anything.
If anyone has any suggestions, it would be greatly appreciated.
HTML
<article class="rowContainer">
<div class="rowOne">
<section class="floatLeft textLightGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
<section class="floatLeft textDarkGreyArea">
<p>Description goes here</p>
<img src="..." />
</section>
</div>
</article>
<article class="rowContainer">
<div class="rowTwo">
<section class="floatLeft textLightGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
<section class="floatLeft textDarkGreyArea">
<img src="..." />
<p>Description goes here</p>
</section>
</div>
</article>
CSS
.rowContainer:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
font-size: 0;
}
.rowContainer {
display: inline-block;
}
.rowOne {
overflow: hidden;
background: #c9c9c9;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #c9c9c9),
color-stop(49.99%, #c9c9c9), color-stop(49.99%, #e0e0e0), color-stop(100%, #e0e0e0));
background-image: -webkit-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0
49.99%,
#e0e0e0 100%);
background-image: -moz-linear-gradient(left, #c9c9c9, #c9c9c9 49.99%, #e0e0e0 49.99%,
#e0e0e0 100%);
}
.rowTwo {
overflow: hidden;
background: #e0e0e0;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e0e0e0),
color-stop(49.99%, #e0e0e0), color-stop(49.99%, #c9c9c9), color-stop(100%, #c9c9c9));
background-image: -webkit-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9
49.99%,
#c9c9c9 100%);
background-image: -moz-linear-gradient(left, #e0e0e0, #e0e0e0 49.99%, #c9c9c9 49.99%,
#c9c9c9 100%);
}
.floatLeft {
width: 49.99%;
float: left;
}
http://jsfiddle.net/Ht25w/1/

Answer 1

there is a bug with chrome and gradients, it's obviously not your fault. the simplest solution is to give the background gradient to each instead on the father
a solution to fix text in each box is to use display table / table cell with 50% width, give half gradient to each and bottom align the right box while positioning the text absolute to top like in this [http://jsfiddle.net/Ht25w/8/]