Agregue un div debajo de la fila envuelta en bloque en línea

Tengo una lista de elementos de bloque en línea que se ajustan para formar varias filas. Me gustaría mostrar un elemento div en una de las filas, dependiendo de dónde se encuentra un elemento específico. Por ejemplo, las primeras filas están numeradas:

elementos numerados de bloque en línea http://i43.tinypic.com/2zxw9jt.jpg

Si quisiera apuntar al tercer elemento y mostrar un elemento de longitud completa (el 100% de la división que contiene los bloques), se vería así:

entre la primera y la segunda fila http://i39.tinypic.com/qsr51h.jpg

La posición del div de longitud completa sería la misma para cualquiera de los bloques 1-5. O, si se apuntara a otro bloque, como 7 u 8, se vería así:

entre la segunda y tercera fila http://i43.tinypic.com/j14lua.jpg

Observe cómo las filas se "desplazan hacia abajo". Entiendo cómo hacer esto con elementos a nivel de bloque, pero no entre filas de elementos de bloque en línea envueltos. Las filas en las que se ubicaría cada uno de los bloques numerados cambiarían a medida que cambia el ancho de la ventana del navegador, y el div de longitud completa "sabría" en qué fila se ubicará debajo.

¿Cómo podría alguien colocar la división debajo de esa fila particular de elementos? ¿Es posible con algún tipo de posición relativa o absoluta con CSS? ¿Podría la posición de la fila cambiar dinámicamente a medida que los bloques se reordenan con los cambios de ancho de la ventana?

ACTUALIZAR: Aquí hay uncodepen Que tiene los bloques y el div insertado. El div está diseñado para estar en una posición absoluta, y se puede mover a la posición adecuada insertándolo después de la etiqueta del elemento de bloque deseado, pero todavía no puedo colocar la fila debajo para hacer espacio y deslizarse hacia abajo.

Respuestas a la pregunta(2)

Su respuesta a la pregunta