JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner inner-right">
    <!-- RIGHT CONTENT GOES HERE -->
  </div>
  <div class="inner inner-left">
    <!-- LEFT CONTENT GOES HERE -->
  </div>
  <div class="inner inner-center">
    <!-- CENTER CONTENT GOES HERE -->
  </div>
</div>

SCSS

.outer{
  overflow: auto; /* для того чтобы растягиваться float блоками*/
}

.inner{
  height: 40px;
  background-color: green;
  box-sizing: border-box;
  
  &-center{
    overflow: hidden;
    border: solid #ff0 2px;
  }
  
  &-left{
    float: left;
    width: 30px;
    background-color: rgba(255, 0, 0, 0.3);
  }
  
  &-right{
    float: right;
    width: 30px;
    background-color: rgba(0, 0, 255, 0.3);
  }
}

button{
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

TypeScript

setTimeout(() => {
	document.querySelectorAll(`.inner.inner-left`)[0].innerHTML = `<button>L</button>`;
  document.querySelectorAll(`.inner.inner-right`)[0].innerHTML = `<button>R</button>`;
  document.querySelectorAll(`.inner.inner-center`)[0].innerHTML = `<button>CENTER</button>`;
}, 2000);