Отзывчивость компонента реакции - изменение состояния при изменении размера основного элемента рендеринга

Получил компонент react.js, который отображает 3 кнопки, выровненные по горизонтали на панели приложений.

Ярлыки меню сокращаются при изменении состояния, однако, как я могу изменить эти состояния при изменении размера родительского элемента div, непосредственно перед тем, как дочерние элементы (кнопки) начнут выравниваться по вертикали (складываются друг на друга, а не выравниваются по горизонтали)? Таким образом, в основном речь идет о перехвате события основного элемента div, недостаточно широкого, чтобы кнопки были выровнены по горизонтали.

Как правильно выполнить то, что я собираюсь делать?

return(
    <div>
        <Button color = "inherit" variant = {this.state.btnVar0} onClick = {(e) => this.toggleMenuBtns(0,e)}><span className = {classes.menuButtonMed}  >M{this.state.squeeze > 1 ? null : <span  >ed</span>}</span>{this.state.squeeze > 0 ? null : <span>icine</   span>}</Button>
        <Button color = "inherit" variant = {this.state.btnVar1} onClick = {(e) => this.toggleMenuBtns(1,e)}><span className = {classes.menuButtonTreat}>D{this.state.squeeze > 1 ? null : <span>ia</span>}</span>{this.state.squeeze > 0 ? null : <span>gnose</span>}</Button>
        <Button color = "inherit" variant = {this.state.btnVar2} onClick = {(e) => this.toggleMenuBtns(2,e)}><span className = {classes.menuButtonCom}  >W{this.state.squeeze > 1 ? null : <span  >ell</span>}</span>{this.state.squeeze > 0 ? null : <span>ness</span>}</Button>
    </div>
);