JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
</section>

CSS

section {
    position:relative;
}

article { 
    width: 30%;
    min-width: 200px;
    min-height: 200px;
    display: inline-block;
    border: 1px solid black;
}

.expanded {
    background-color:#eef;
    position:absolute;
    left:0px;
    width: 100%;
    transition: width 0.5s;
}

JavaScript

$("article").click(function() { 
  $(this).toggleClass("expanded"); 
        if ($(this).hasClass("expanded"))
        {
        	$(this).before("<article class='blank'>&nbsp;</article>");
        }
        else
        {
			$(this).prevAll('.blank').first().remove();
        }
});