JSFiddle - React, Tailwind, and code Playground

by MathiasaurusRex

HTML

<div class="wrapper">

<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>

<div class="x">4</div>
<div class="b">6</div>
<div class="b">5</div>
    
 </div>

CSS

.wrapper{
	position:relative;
	min-width:300px;
	max-width:500px;
}

div {}
.a{
    position:relative;
    float:left;
    width:50px;
    height:50px;
    background:red;
}

.b{
    position:relative;
    float:right;
    width:50px;
    height:50px;
    background:red;
}

.x {
    float: left;
}

JavaScript

$('.x').css('width', '100%').css('width', '-=250px');