Div push down content of sibling - html

Question

I have this setup of my elements http://codepen.io/Py89/pen/QbKgWv?editors=110
HTML:
<div class="container">
<div class="item-container" id="right-block">
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
</div>
<!-- #Item container -->
<div class="item-container" id="left-block">
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
</div>
<!-- #Item container -->
</div>
CSS:
.container {
*zoom: 1;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
width: 80%;
margin: 20px auto;
background: rgba(100, 100, 100, 0.4);
}
.item-container {
float: right;
width: 50%;
}
.media {
background: rgba(30, 40, 50, 0.4);
float: right;
overflow: hidden;
margin: 0 10px 50px;
padding: 10px;
}
.media .media__item {
width: 100%;
}
.media .media__item img {
margin: 0 auto;
}
.media .media__body {
width: 100%;
padding-top: 10px;
overflow: hidden;
}
h2 {
margin: 0 0 10px;
text-align: center;
}
h3 {
margin: 0;
text-align: center;
}
#left-block {
background: rgba(200, 10, 50, 0.3);
}
#right-block {
background: rgba(50, 200, 100, 0.3);
}
Is it at all possible for the divs in the second row of the right to get pushed down the same amount as the divs on the left ?
I know it can be done with jQUery / JavaScript, but i'm interested if it can be done, purely by CSS.
Keep in mind that I cannot change the base HTML markup.

Answer 1

In this case , the easiest way is to give a height to container.
.media {
background: rgba(30, 40, 50, 0.4);
float: right;
overflow: hidden;
margin: 0 10px 50px;
padding: 10px;
height:420px;//add this
}
//could also place it on '.media .media__body'
http://codepen.io/maio/pen/PqGjam

Answer 2

There are two angles here, regarding the type of content on the page:
Dynamic content:
With the provided html layout, you can't obtain
the desired result. That's because u have two different container
nodes with (presumably) dynamic content, and no way to link them in
css.
Static content:
As maioman said, you can easily set a height to the
container, but i recommend setting to the row class.

Answer 3

Or, you can add:
<h3><br></h3>
to the divs where there is only one line of text. Additional break would be rendered as two lines of text below the pics so the heights would match each other exactly. Like this:
THIS IS YOUR DIVS WITH TWO LINES OF TEXT:
<h2>Some text</h2>
<h3>More text</h3>
AND FOR THE DIVS WITH ONE LINE OF TEXT ADD THIS:
<h2>Some text</h2>
<h3><br></h3>
I hope it helps....