Unequal Card size in css - html

Question

I have card carousel in react .Card increases its height depending on the contents .
this is my code.
<Slider {...carouselCardProps} ref={(node: any) => (carouselCardContainer = node)} >
{gameNewsData &&
gameNewsData.map(data => (
<NewsItem
gameData={data}
skeletonLoading={false}
></NewsItem>
))}
</Slider>
<RightOutlined className="cxe-right-arrow" onClick={() => carouselCardContainer.slickNext()} />
newsITem component
<div className="cxe-news-card">
<div className="cxe-news-item-header">
<div className="cxe-news-avatar ">
<img alt="avatar" src={gameData.source.page.page_logo.url} />
</div>
<div className="cxe-news-content">
<span>{gameData.source.name}</span>
<span>
{moment
.unix(gameData.created_at)
.format("MM/DD/YYYY hh:mm:ss")}
</span>
</div>
</div>
<div className="cxe-new-section">
<img alt="newsItem" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"/>
<div className="cxe-news-content-container">
<h3 className="cxe-news-heading">{gameData.title}</h3>
<p className="cxe-news-content-details">{gameData.summary}</p>
<a className="cxe-read-more" href="/">Read More</a>
</div>
</div>
</div>
if h3 has 2 line text then card becomes unequal how can we fix it

Answer 1

I think you can use flexbox to have equal card height.
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.flex-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Then you can apply 'flex-container' to container (with className cxe-new-section) and 'flex-item' to all the items you want to show as children of it.