JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
  <div id="root_child0"></div>
  <div id="root_child1">
    <div id="root_child1_child0"></div>
    <div id="root_child1_child1"></div>
  </div>
</div>

CSS

body {
        margin: 0px;
      }

      #root {
        width: 1000px;
        height: 1000px;
        align-items: baseline;
        display: flex;
        flex-direction: row;
      }

      #root_child0 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 600px;
      }

      #root_child1 {
        display: flex;
        flex-direction: row;
        width: 500px;
        height: 800px;
        align-items: baseline;
      }

      #root_child1_child0 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 500px;
      }

      #root_child1_child1 {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 400px;
      }

JavaScript

console.log("root:", document.getElementById("root").clientWidth);
console.log("root_child0:", document.getElementById("root_child0").clientWidth);
console.log("root_child1:", document.getElementById("root_child1").clientWidth);
console.log("root_child1_child0:", document.getElementById("root_child1_child0").clientWidth);
console.log("root_child1_child1:", document.getElementById("root_child1_child1").clientWidth);