JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="menu-vertical">menu-vertical</div>
    <div class="mainContent">
        <div>div</div>
        <div>div</div>
        <div>div</div>    
    </div>
</div>

CSS

.container {
    border: 3px solid #666;
    overflow: hidden
}
.menu-vertical {
    width: 230px;
    float: left;
    padding: 10px;
    border: 2px solid #f0f
}
.mainContent {
    overflow: hidden;
    padding: 30px;
    border: 2px solid #00f;
    background: red;  
}

.mainContent > div {
    border: 1px solid green;
    margin: -1px;  /* to balance border */
    width: 20px;
    float: left;
}

JavaScript

$(function(){
   var outerdiv = $('.mainContent');
   var innerdivs = $('.mainContent > div'); 
   var sum =0;
    
    innerdivs.each(function(index){
        sum += $(this).width();
    });   
    
    outerdiv.width(sum);
    
});