JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer-container-blue'>
  <div class='inner-container-left-orange'>
    inner left
  </div>

  <div class='inner-container-right-red'>
    <div class='inner-container-right-green'>

      <div class='inner-container-right-child'>
        inner1
      </div>
      <div class='inner-container-right-child'>
        inner2
      </div>
      <div class='inner-container-right-child'>
        inner3
      </div>

    </div>
  </div>

</div>

CSS

.outer-container-blue {
    width: 800px;
    height: auto;
    background-color: blue;
    overflow: hidden;
  }
  .inner-container-left-orange {
    display: inline-block;
    float:left;
    width: 15%;
    background-color: orange;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    /* I would like the orange container to be automatically sized so that  */
    /* it's height is the same as the green and red containers.  */
    height: auto;
  }
  .inner-container-right-red {
    position: relative;
    display: inline-block;
    float:left;
    width: calc(100% - 120px);
    height: auto;
    background-color: red;
  }
  .inner-container-right-green {
    position: relative;
    display: inline-block;
    height: auto;
    background-color: green;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
  }
  .inner-container-right-child {
    display: inline-block;
    width: 100px;
    height: 25px;
    margin: 10px;
    background-color: yellow;
    border: 5px solid black;
  }

JavaScript

/* I would like the orange container to be automatically sized so that  */
    /* it's height is the same as the green and red containers.  */