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

var open = false;

jQuery("article").click(function () {
    open = !open;

    if (open) {
        $(this).addClass("expanded");
        $(this).before("<article class='holder'>&nbsp;</article>");
    } else {
        $("article").removeClass("expanded");
        $(".holder").remove();
    }
});