title: Show a div in between flex items
body: <p>I'm creating a page that is populated with <code>&lt;div&gt;</code> elements. The container containing this div has <code>display: flex;</code>. So the items wrap automaticaly to several rows. Now I want to click on an item so it would open another <code>&lt;div&gt;</code> with info about the selected item. But this info div should come under the row that contains the selected div and with full width of the container.</p>
  
  <p>I don't know how to make this work.
  I made a simple JsFiddle to start with: <a href="https://jsfiddle.net/44j4jnq4/3/" rel="noreferrer">https://jsfiddle.net/44j4jnq4/3/</a></p>
  
  <p>I'm getting the click event and dynamiccaly adding the dinfo div with Angular.
  My question is mostly about how to style it so it wouldn't mess with the flex items and have a width of the container.</p>
  
  <p>Also I have this image to visualize what I'm going for.</p>
  
  <p><a href="https://i.stack.imgur.com/vbGEs.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/vbGEs.jpg" alt="enter image description here"></a></p>
  
  <p>Hope you can help me with this.</p>