JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div class="element">1. Pierwszy</div>
    <div class="separator"></div>
    <div class="element">2. Drugi</div>
    <div class="separator"></div>
    <div class="element">3. Trzeci</div>
    <div class="separator"></div>
    <div class="element active">4. Czwarty</div>
    <div class="separator"></div>
    <div class="element">5. Piąty</div>
    <div class="separator"></div>
    <div class="element">6. Szósty</div>
    <div class="separator"></div>
    <div class="element">7. Siódmy</div>
</div>

CSS

body {background: #222;color: black;}
.separator {display:none}

.element {
    background: orange; border-radius:3px;-webkit-border-radius:0.4em;
    line-height: 2em; text-align: center;
    float: left;
    width: 45%;
    margin: 5% 5% 0 0;
}
.element.active {
    margin-right: 0;
    width: 95%;
}

JavaScript

// in this case I want to move '5. ' element above active element
// just to fill that free space in the middle
// (click another odd element)

$(document).ready(function(){
    $("#wrap").find('.separator').remove(); 

    var $active = $(".active");
    if ($active.is(":odd")) {
        $active.next().after($active);
    }
    
    // I should probably use .index() and .detach() methods
    
});