Eu tenho uma lista de elementos de bloco embutido que envolvem para formar várias linhas. Gostaria de exibir um elemento div entre as linhas, dependendo de onde um elemento específico está localizado. Por exemplo, as primeiras poucas linhas são numeradas:

elementos de bloco inline numerados http://i43.tinypic.com/2zxw9jt.jpg

Se eu quisesse segmentar o terceiro elemento e exibir um elemento de comprimento total (100% do div contendo os blocos), então ficaria assim:

entre primeira e segunda filas http://i39.tinypic.com/qsr51h.jpg

A posição do div full-length seria a mesma para qualquer um dos blocos 1-5. Ou, se outro bloco fosse segmentado, como 7 ou 8, seria parecido com:

entre segunda e terceira filas http://i43.tinypic.com/j14lua.jpg

Observe como as linhas são "deslocadas para baixo". Eu entendo como fazer isso com elementos de nível de bloco, mas não entre linhas de elementos de bloco embutido. As linhas nas quais cada um dos blocos numerados estariam mudados à medida que a largura da janela do navegador muda, e o div de comprimento total "saberia" qual linha deve ser posicionada abaixo.

Como alguém colocaria o div abaixo dessa linha específica de elementos? É possível com algum tipo de posição relativa ou absoluta com CSS? A posição da linha pode mudar dinamicamente conforme os blocos são reordenados com as alterações de largura da janela?

ATUALIZAR: Aqui está umcodepen que tem os blocos e o div inserido. A div é estilizada para ser posicionada de forma absoluta, e pode ser movida para a posição apropriada, inserindo-a após a tag do elemento de bloco desejado, mas ainda não consigo fazer com que a linha abaixo dela crie espaço e deslize para baixo.