У меня есть список элементов inline-block, которые переносятся в несколько строк. Я хотел бы отобразить элемент div между строками, в зависимости от того, где находится конкретный элемент. Например, первые несколько строк пронумерованы:

пронумерованные элементы встраиваемых блоков http://i43.tinypic.com/2zxw9jt.jpg

Если бы я хотел нацелиться на третий элемент и отобразить элемент полной длины (100% от div, содержащего блоки), то это выглядело бы так:

между первым и вторым рядами http://i39.tinypic.com/qsr51h.jpg

Положение div полной длины будет одинаковым для любого из блоков 1-5. Или, если бы был нацелен другой блок, например 7 или 8, он бы выглядел так:

между вторым и третьим рядами http://i43.tinypic.com/j14lua.jpg

Обратите внимание, как строки «сдвинуты вниз». Я понимаю, как сделать это с элементами уровня блока, но не между рядами обернутых элементов inline-block. Строки, в которых будет находиться каждый из пронумерованных блоков, будут меняться по мере изменения ширины окна браузера, и полный блок div будет «знать», какую строку следует расположить ниже.

Как кто-то может разместить div под этим конкретным рядом элементов? Возможно ли это с какой-то относительной или абсолютной позицией в CSS? Может ли положение строки изменяться динамически при изменении порядка блоков при изменении ширины окна?

ОБНОВИТЬ: Вотcodepen который имеет блоки и вставленный div. Div имеет стиль, чтобы быть абсолютно позиционированным, и его можно переместить в соответствующую позицию, вставив его после нужного тега элемента блока, но я все еще не могу получить строку под ним, чтобы освободить место и скользить вниз.