JSFiddle - React, Tailwind, and code Playground

HTML

<div class="extrawrapper">
     <div class="wrapper">
        <img class="box"/>
        <img class="box"/>
        <img class="box-medium"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
        <img class="box"/>
    </div>
</div>

CSS

.wrapper {
    width:100px;
    margin:2em auto;
    position:relative;
    }
.box {
    height:10px;
    width:10px;
    margin:5px;
    float:left;
    background-color:blue;
    }
.box-medium {
    height:30px;
    width:30px;
    margin:5px;
    opacity:.8;
    position:absolute;
    background-color:pink;
    }

JavaScript

$(document).ready(function(){
    $('<div style="width:40px;height:1px;float:left"></div>').insertBefore('.box-medium');    
    $('<div style="width:40px;height:1px;float:left"></div>').insertBefore('img:nth-child(8)');
})