JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div class="middle" id="A">A</div>
    <div class="middle" id="B">B</div>
    <div class="middle" id="C">C</div>
<div>

CSS

.middle
{
    width:33%;
    height:50px;
    float:left;
}

#A { background-color:#CCC; }
#B { background-color:#666; }
#C { background-color:#EEE; }

JavaScript

$(document).ready(function() {
    $(".middle").click(function() {
        Resize(this);
    });
    
});

function Resize(column)
{
    
    // Make all the columns 50%
    $(".middle").css("width", "50%");
    
    // Set the current column to 100% and make it the first element within the containing div
    $(column).css("width", "100%");     
    $(column).parent().prepend(column);
    
}