JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blue">
  <div id="red" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true">
    <b>
      the red box is float:left and
      it is inside the blue one
    </b>
    aaaaa bbbbbbbbbbbbbb
    cccccc ddd eeeee
    supercalifragilisticexpialidocious
    gggg hhhh lllll
    mmm nnnnn ooooo
    
    
  </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="500" min="0" max="500">
<span id="blue_width"></span> px

CSS

*{font-family:sans-serif;font-size:13px;}
#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)}

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;
  blue.style.width = this.value + "px";
  redView.textContent = red.offsetWidth;
};

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