JSFiddle - React, Tailwind, and code Playground

HTML

Click on the div you want to fit/reset (except the first div)

<div class="wrapper">
    <div class="div"><span>Fixed</span></div>
    <div class="div"><span>Fluid (long long long long text)</span></div>
    <div class="div"><span>Fluid</span></div>
    <div class="div"><span>Fluid</span></div>  
</div>

CSS

.wrapper {
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
    border: 1px solid black;
    display: flex;
    justify-content: flex-start;
}
    
.div{
    overflow:hidden;
    white-space:nowrap;
	border-right: 1px solid black;
}
    
.div:first-child {
    min-width: 50px; /* fixed width */
    background: #999;
    text-align: center;
}
    
.div:not(:first-child) {
    width: 100%;
    text-align: center;
    transition: width 1s;
}
    
.div:last-child {
    border-right: 0px;
}

div:not(:first-child) span {
	background: #ddd;
}

JavaScript

var expanded = '';

$(document).on("click", ".div:not(:first-child)", function(e) {

	var thisInd =$(this).index();

	if(expanded != thisInd) {
		//fit clicked fluid div to its content and reset the other fluid divs
	 	$(this).css("width", "400%");
		$('.div').not(':first').not(this).css("width", "100%");
		expanded = thisInd;
    }
	else{
		//reset all fluid divs
	    $('.div').not(':first').css("width", "100%");
		expanded = '';
	}
});