Add a div below inline-block wrapped row

Question

I have a list of inline-block elements that wrap to form several rows. I\'d like to display a div element between on of the rows, depending on where a specific element is lo

Answer 1

Challenge accepted. A CSS only solution:

http://codepen.io/mlhaufe/pen/aONRGP

HTML:

    
        
        1
        1. Lipsum Lipsum
    
    ...

CSS:

* {
    box-sizing: border-box;
}
.container {
    position: relative;
    outline: 1px solid green;
    width: 60%;
    margin:auto;
    font: 16pt sans-serif;
}
.item {
    position: static;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    width: 50px;
    overflow: visible;
}
[name=rdo-visible] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
[name=rdo-visible]:checked ~ .box {
    margin-bottom: 2em;
}
[name=rdo-visible]:checked ~ .block {
    display: block;
    margin-top: -1.6em;
}
.box {
    display: block;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: red;
    color: white;
    line-height: 50px;
    text-align: center;
}
.block {
    display: none;
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2em;
    line-height: 2em;
    background-color: blue;
    color: white;
}