JSFiddle - React, Tailwind, and code Playground

HTML

<span class="text">Click on the div you want to fit/reset (except the first one which is fixed)</span>

<div class="mainTable">

  		<div class="column propriete">

				<div class="cell"><span class="fit">Propriété</span></div>
				<div class="cell"><span class="fit">Artisan 45</span></div>
				<div class="cell"><span class="fit">Enghien 528</span></div>
				<div class="cell"><span class="fit">Fort Jaco 1473</span></div>
				<div class="cell"><span class="fit">Jasmin 39</span></div>
				<div class="cell"><span class="fit"></span></div>
				<div class="cell"><span class="fit">Le Routi 4</span></div>
				<div class="cell"><span class="fit">Maréchal 23</span></div>
				<div class="cell"><span class="fit">Mimosas 112</span></div>
				<div class="cell"><span class="fit">Molière 501</span></div>
				<div class="cell"><span class="fit"></span></div>
				<div class="cell"><span class="fit"></span></div>
				<div class="cell"><span class="fit">Rabelais 301</span></div>
				<div class="cell"><span class="fit">Tilmont 12</span></div>
				<div class="cell"><span class="fit">Verdun 57</span></div>
				<div class="cell"><span class="fit">Waterloo 24</span></div>
				<div class="cell"><span class="fit">Wavre 27</span></div>
			    
		    </div>
		  
		    <div class="column proprietaire">
			    
				<div class="cell"><span class="fit">Propriétaire</span></div>
				<div class="cell"><span class="fit">Sabrina Hereg</span></div>
				<div class="cell"><span class="fit">Alcion Invest</span></div>
				<div class="cell"><span class="fit">Alcion Invest</span></div>
				<div class="cell"><span class="fit">AmariLys Consult SPRL</span></div>
				<div class="cell"><span class="fit">Levin & Co</span></div>
				<div class="cell"><span class="fit">AmariLys Consult SPRL</span></div>
				<div class="cell"><span class="fit">AmariLys Consult SPRL</span></div>
				<div class="cell"><span class="fit">Levin & Co</span></div>
				<div class="cell"><span class="fit">AmariLys Consult...

CSS

@import url(//fonts.googleapis.com/css?family=Lato:400,700,900);

:root {
	--color-bgd-gradient-dark		  : #191c21;
	--color-bgd-gradient-light		  : #292e39;
	--color-bgd-table-first-cell	  : #292b34;
	--color-bgd-table-headers		  : #292e3a;
	--color-bgd-colclone-header		  : #4c3c49;
	--color-bgd-table-column-highlight: #24282f;
	--color-bgd-table-cell-highlight  : #2b3038;
	--color-txt-table-cell-highlight  : #ffffff;
	--color-txt-table-headers		  :	#ffffff;
	--color-txt-table-cell			  :	#cfd3d2;
	--color-txt-dl					  :	#999999;
    --color-borders					  :	#414c5e;
}

body{
	font-family			  : 'lato';
	background			  : linear-gradient(var(--color-bgd-gradient-dark) 0%, var(--color-bgd-gradient-light) 100%) fixed;
	font-weight			  : 400;
	font-size			  : 11px;
	padding				  : 20px;
	-webkit-touch-callout : none;
	-webkit-user-select   : none; 
	-khtml-user-select	  : none;
	-moz-user-select	  : none;
	-ms-user-select		  : none;
	user-select			  : none;  
}

.text{
	color:white;
}

.mainTable {
    overflow   : hidden;
    width      : 100%;
    margin-top : 20px;
    border	   : 1px solid var(--color-borders);
    display    : flex;
}

.cell{
    height			: 32px;
	border-top		: 1px solid var(--color-borders);
	white-space		: nowrap;
}

.cell:first-child{
    background : var(--color-bgd-table-headers);
    color	   : var(--color-txt-table-headers) !important;
    border-top : none;
}
		
.cell:not(:first-child):hover{
    color	    : var(--color-txt-table-cell-highlight) !important;
    background  : var(--color-bgd-table-cell-highlight);
    box-shadow  : 5px 5px 25px rgba(0, 0, 0, 0.4) inset; 
    text-shadow : 0 0 0px #aaa, 0 0 5px #888, 0 0 30px #666, 0 0 6px #444, 0 0 9px #222, 0 0 11px #111;	
}
		
.cell .dl{
    color : var(--color-txt-dl);
}

.column {
    white-space  : nowrap;
    border-right : 1px solid var(--color-borders);
    transition   : flex 0.4s;
    overflow     : hidden;
	white-space  : nowrap;
	line-height : 32px;
}

.column:first-child {
   ...

JavaScript

var tableWidth;
var expanded	   = '';
var fixedDivWidth  = 0;
var flexPercentage = 100/($('.column').length-1);

$(document).ready(function() {

    // Set width of first fixed column
    $('.column:first-child .cell .fit').each(function() {
        var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
        if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
    });
    $('.column:first-child'  ).css('min-width',fixedDivWidth+'px')
	
    //Reset all fluid columns
    $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})

$(window).resize( function() {

    //Reset all fluid columns
    $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')	
    expanded   = '';
})

$(document).on("click", ".column:not(:first-child)", function(e) {
	
    var thisInd =$(this).index();	
	
    // if first click on a fluid column
    if(expanded != thisInd) 
    {
        var fitDivWidth=0;
    
        // Set width of selected fluid column
        $(this).find('.fit').each(function() {
            var c = $(this)[0].getBoundingClientRect().width;
            if( c > fitDivWidth ){fitDivWidth = c;}
        });
        tableWidth = $('.mainTable')[0].getBoundingClientRect().width; 
        $(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
		
        // Use remaining space equally for all other fluid column
        $('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
		
        expanded = thisInd;
    }

    // if second click on a fluid column
    else
    {
        //Reset all fluid columns
        $('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')

        expanded = '';
    }
  
});