title: Animating Height and Pushing Divs Below
body: <p>This is what I try to do: </p>
  
  <p>When the user clicks on an image (see screenshot below), I'd like some text associated with this image to show up under the row of images (circles). I have been trying to use a transition for this. My initial test was to create a div (in green) with the position set to relative, and a child div (in red) whose position was set to absolute. I then animated the top property of the child div. This worked okay.</p>
  
  <pre><code>.parent { position: relative; }
  .child { position: absolute; top: -100; transition: top 1s linear; }
  .child:target { top: 0; }
  </code></pre>
  
  <p>The problem is that i have more divs under this text, and I'd like them to be pushed when the text is sliding down (the 'test' text in my example). However this doesn't work, because the parent div's height (in green), as you know,  is not expanded when the children div's position is set to absolute.</p>
  
  <p>My question thus is: is there a way of doing this at all?</p>
  
  <p>Thanks for your ideas.</p>
  
  <p>PS: in the screenshot below, the height of the green box is larger than the height of the red box, because there's actually another red div under the first one, but its opacity is set to 0.</p>
  
  <p><img src="https://i.stack.imgur.com/MXzDE.png" alt="screenshot"></p>