JSFiddle - React, Tailwind, and code Playground

HTML

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

Set Black to <input type="text" id="width_input" value="70%" />
<button type="button">test</button>

CSS

.wrapper {
    overflow: hidden;
    width: 100%;
}
.left {
    background-color: red;
    height: 100px;
    width: 50%;
    float: left;
}
.right {
  
    float: right;
    background-color: black;
    height: 100px;
    width: 50%;
}

JavaScript

$(function(){
    $("button").click(function(){
        var precSize = $("#width_input").val();
        var parentWidth = $(".wrapper").width(); 
        var leftOldSize = $(".left").width();
        var newSize = parentWidth * ( (100 - parseInt(precSize)) / 100);
        $(".left").width(newSize);
        $(".right").width( $(".right").width() + (leftOldSize - newSize));
    });
});