JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blue">
  <div id="red" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true">
    aaaaa bbbbbbbbbbbbbb cccccc ddd eeee
    ffff gggg hhhh iii
  </div>
</div>

<br style="clear:both"><br>

Red box's width is <span id="red_width"></span>px
<br><br>

Blue box's width is
<input type="range" value="0" min="200" max="600">
<span id="blue_width"></span> px

CSS

*{font-family:sans-serif;font-size:13px;}
html,body{overflow:hidden}
#blue { width: 0px; border:15px blue outset;height:170px;}
#blue > #red { border:15px red outset; padding:10px; float:left; background:rgba(255,255,255,0.8)}
html::before{content:'';position:absolute;top:0;right:0;height:100%;width:200px;background:linear-gradient(to right, transparent, white 90%);}

JavaScript

var blue = document.querySelector("#blue");
var red = document.querySelector("#red");
var blueView = document.querySelector("#blue_width");
var redView = document.querySelector("#red_width");

document.querySelector("input").oninput = function(){
	blueView.textContent = this.value > 500 ? "infinity" : this.value;
  blue.style.width = this.value + "px";
  redView.textContent = red.offsetWidth;
};

document.querySelector("input").oninput();