JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="tabs">
        <div class="row"><div class="tab">1</div></div>
        <div class="row"><div class="tab">2</div></div>
        <div class="row"><div class="tab">3</div></div>
        <div class="row"><div class="tab">4</div></div>
        <div class="row"><div class="tab">5</div></div>
        <div class="row"><div class="tab">6</div></div>
        <div class="row"><div class="tab">7</div></div>
    </div>
</div>

CSS

body{
    margin:0px;
}
#container {
    position:absolute;
    top:48px;
    bottom:0px;
    width:100%;
}

#tabs {
    display:table;
    height:100%;
}
.row { 
   display:table-row; 
    background-color:red;
}
.tab {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

JavaScript

var rh = $('.tab').height();
$('.tab').css({'width':rh+'px'});