Push down a series of divs when another div is shown - css

Question

I'm trying to do this when someone clicks a box:
It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.
<div ng-repeat="friend in friends" ng-click...>
<div>
{{friend}}
</div>
<div collapse="expand">
some content
</div>
</div>
But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).
So, I have this plunker, where the gray div is outside the ng-repeat.
Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?
I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.
Considerations:
A row could have one to n items.
What I have tried
Put the gray div with position relative, but this would not push down the other divs.

Answer 1

First of all your task is unachievable unless you change markup. The result should be like this.
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
For that you need to use custom filter. I took it from here
how to split the ng-repeat data with three columns using bootstrap
Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.
You modified working planker is here
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview