How can I make two different components the same height

Question

I have a react card that can render two different things depending on a whether or not a certain prop is active. How can I ensure that the two different things are the same height, as the cards are not the same size when I put them next to each other?

Here is the code:
<div className={cardInfoClasses}> <h3 className={titleClasses}>{this.props.name}</h3> {cardMain} </div>

cardMain can either be:
<div> <Progress productData={productData} className='mobile_hide'/> </div>; or
<CardButton initialData = {this.props.data}/>

Answer 1

You can accomplish that with display flex or table. You give the parent display flex and adjust other properties like justify-elements and width.