JSFiddle - React, Tailwind, and code Playground

HTML

<div style="">
    <div id="top" style="width: 90%;height: 50px;background: #000;margin-bottom: 10px;"></div>
    
    <div id="left" style="width: 40%;height: 100px;background: #000;float: left;margin-right: 10px;"></div>
    <div style="width: 500px;height: 100px;background: #000;float: left;margin-right: 10px;"></div>
    <div id="right" style="width: 60%;height: 100px;background: #000;float: left;"></div>
</div>

JavaScript

var top = $('#top').width();
var sum = top - 500;

var left = (sum * 60)/100 - 10;
var right = (sum * 40)/100 - 10;

$('#left').width(left);
$('#right').width(right);