JSFiddle - React, Tailwind, and code Playground

by nickmanning214

HTML

<div class="lineContainer">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.lineContainer {
    width:100%
    border: 1px solid #000;
    font-size:0px;/*you gotta do this because inline block puts an invisible space between them and they wont fit on the same line*/
}
.lineContainer div {
    height: 10px;
    display:inline-block;
} 
.left {
    width: 100px;
    background:red
}
.right {
    background: blue
}

JavaScript

var parent=document.getElementsByClassName("lineContainer")[0];
var left=document.getElementsByClassName("left")[0];
var right=document.getElementsByClassName("right")[0];
right.style.width=(parent.offsetWidth-left.offsetWidth)+"px";
console.log(parent.offsetWidth,left.offsetWidth,right.offsetWidth)
window.onresize=function(){
    right.style.width=(parent.offsetWidth-left.offsetWidth)+"px";
}