JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div tabindex = "1"></div>
        <div tabindex = "2"></div>
        <div tabindex = "3"></div>
    </div>

CSS

#wrapper {
        height: 300px;
        display: flex;
        flex-direction: column;
    }
    
    #wrapper > * {
        flex: 0 0 25px;
        outline: 0;
        transition: flex-basis 0.3s linear;
    }
    
    #wrapper > div:first-of-type {
        background-color: blue;
        order: 3;
    }
    
    #wrapper > div:first-of-type:not(:focus) + div:not(:focus) + div:not(:focus) {
        flex-basis: 250px;
    }
    
    #wrapper > div:nth-of-type(2) {
        background-color: green;
        order: 2;
    }
    
    #wrapper > div:nth-of-type(3) {
        background-color: yellow;
        order: 1;
    }
    
    #wrapper > div[tabindex]:focus {
        flex: 1 1 250px;
    }