<main></main>
.container {
  //display: flex;
}

.container > div {
  width: 150px;

  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

.container > div h1 {
  background: lightblue;
}
class SameHeight extends React.Component {
  constructor(props) {
    super(props);
    this.myRefs = [];
  }
  
  watchChildHeight() {
    let _ref = null;
    
    return (ref) => {
      if ((ref === null) && (_ref !== null)) {
        const idx = this.myRefs.indexOf(_ref);
        if (idx >= 0) {
          this.myRefs.splice(idx, 1);
        }        
      } else {
        _ref = ref;
        this.myRefs.push(ref);
      }
    }    
  }
  
  fixHeights() {
    let maxHeight = 0;

    $(this.myRefs).each(function(idx, el){

      if ($(el).height() > maxHeight) {
        maxHeight = $(el).height();
        console.log(maxHeight);
      }
    });

    $(this.myRefs).css('min-height', maxHeight);
  }
  
  render() {
    return React.Children.map(this.props.children, (child) => (
      React.cloneElement(
        child,
        {
          refMaker: this.watchChildHeight(),
          fixHeights: this.fixHeights.bind(this),
        },
      )
    ));
  }
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }
  
  setText(box, value) {
    this.setState(oldState => ({
      text: value,
    }));
  }
  
  componentDidUpdate() {
    this.props.fixHeights();
  }
  
  componentDidMount() {
    this.props.fixHeights();
  }    

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.text}
          onChange={(e) => this.setText('text', e.target.value)} 
          />
        <h1 ref={this.props.refMaker}>{this.state.text}</h1>
      </div>  
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <SameHeight>
          <Box />
          <Box />
          <Box />
          <Box />
        </SameHeight>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js