Какой элегантный способ изменить контент при изменении размера

Question

Я хочу показать разные данные или скрыть компонент, если он не помещается на экране.

Я сделал рабочий пример, но я не думаю, что это правильный / элегантный способ сделать это.

Может быть, кто-то может показать мне лучший способ?

Это изображение примера, которое я сделал в codepen. 1. Я хочу скрыть первый красный блок, если он не помещается в серый.

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

Пример Codepen (изменить размер, чтобы скрыть блок):https://codepen.io/bofemptiness/pen/YJRKGj

const styled = styled.default
const Component = React.Component;

const DivHat = styled.div`
    position: fixed;
    top: 0;
    width: 100% ;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
`


const DivProfile = styled.div`
        display: flex;
        height: 100%;
        cursor: pointer;
    `
const ExpCooDiv = styled.div`
        display: flex;
        flex-direction: column;
        font-size: 1rem;
`



class App extends Component {
      constructor(props) {
        super(props)

        this.state = { showCookies: true, lvlRefLastSize: 0 }
        this.statsRef = React.createRef()
        this.cocRef = React.createRef()
        this.lvlRef = React.createRef()

        this.mediaStats = this.mediaStats.bind(this);
    }

      componentDidMount() {
        // Add listner when window resizes
        window.addEventListener('resize', this.mediaStats)

        // Activate function at least one time on load
        this.mediaStats()
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.mediaStats)
    }


    // Show/hide first red block if summ of red blocks widths <= width of grey one
    mediaStats = () => {
      console.log(this.statsRef.current.scrollWidth)
        if (this.lvlRef.current.scrollWidth != 0) 
            this.setState({ lvlRefLastSize: this.lvlRef.current.scrollWidth })

        if (this.statsRef.current.scrollWidth <= this.state.lvlRefLastSize + this.cocRef.current.scrollWidth) {
            this.setState({ showCookies: false })
        } else {
            this.setState({ showCookies: true })
        }
    }


 render () {
   return(
   <DivHat>
       <div>Menu</div>
                <div id='test' ref={this.statsRef}>
                    <div ref={this.lvlRef} id='test2'>
                        {this.state.showCookies &&
                            <React.Fragment>
                          <span>DATA that i hide</span>
                            </React.Fragment>
                        }
                    </div>
                    <div ref={this.cocRef} id='test2'>
                        ANOTHER DATA
                    </div>

                </div>

                <DivProfile >
                    <div> Profile </div>
                </DivProfile>

            </DivHat>
   )
 }
}

ReactDOM.render(<App />, document.getElementById('app'))