JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle_test">
        <div id="master" class="red circle flex">
        
            <div class="head">
                Parent
            </div>
            <div class="body flex">
                <div class="blue circle">
                    <div class="head">
                        child-0
                    </div>
                    <div class="body flex">
                        <div class="green circle">
                            <div class="head">sub-child-0</div>
                            <div class="body">content here</div>
                        </div>
                        <div class="green circle">
                            <div class="head">sub-child-1</div>
                            <div class="body">content here</div>
                        </div>
                        <div class="green circle">
                            <div class="head">sub-child-2</div>
                            <div class="body">content here</div>
                        </div>
                    </div>
                </div>
                <div class="blue circle">
                    <div class="head">
                        child-1
                    </div>
                    <div class="body flex">
                        <div class="green circle">
                            <div class="head flex">sub-child-0</div>
                            <div class="body">content here</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

CSS

* {
      margin: 0;
      padding: 0;
    }
    .flex {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      flex-flow: row wrap;
      justify-content: space-around;
    }
    .circle {
      border-radius: 50%;
      padding: 40px;
      box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    }
    .head {
      color: #fff;
      text-align: center;
      margin-bottom: 10px;
      height: 20px;
    }
    .body {
      align-items: center;
    }
    .red {
      background-color: rgba(255, 17, 0, 0.76);
    }
    .blue {
      background-color: rgba(8, 0, 255, 0.76);
    }
    .green {
      background-color: rgba(0, 157, 11, 0.76);
    }

JavaScript

document.querySelectorAll(".circle")
        .forEach( el => el.style.height = window.getComputedStyle(el).width);