JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">	
<a id="c1"></a>
	<a id="c2"></a>
	<a id="c3"></a>
	<a id="c4"></a>
	<a id="c5"></a>
</div>

CSS

#accordion{
	max-width: 500px;
    height:100px;
	border:1px solid #000;
	padding:0;
    display: -webkit-flex;
    display: flex;
}
#accordion a{
    flex: 1;
    -webkit-flex: 1;
    
	height:100px;
    transition-property: flex;
    transition-duration: 2s;
    transition-timing-function: ease;
    
    -webkit-transition-property: -webkit-flex;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    
    -moz-transition-property: flex;
    -moz-transition-duration: 2s;
    -moz-transition-timing-function: ease;
    
    -o-transition-property: flex;
    -o-transition-duration: 2s;
    -o-transition-timing-function: ease;
}
#accordion a:hover{
    -moz-flex: 5;
    flex: 5;
}
#c1{background-color:#53B388}
#c2{background-color:#5A69A9}
#c3{background-color:#C26468}
#c4{background-color:#BF7CC7}
#c5{background-color:#f00}