React - Bootstrap - Making columns all the same height - css

Question

Here is a fiddle showing my issue:
https://jsfiddle.net/dbfev23h/
In essence, I have a React-Bootstrap <Row> tag and underneath it I am mapping over a list of books that I want rendered as "cards" to the screen. However, because of the size of the content, the heights of the "cards" are all over the place. How do I make the height of the cards to be uniformly the height of the max height of the card in that row?
One thing that may be an issue is that there is only one bootstrap <Row>, is that the issue?
In any case, I've tried the suggestions from stuff like: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height and Bootstrap 4 Cards of same height in columns and Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height but nothing works.
Here is my actual code:
export class BooksComponent extends React.PureComponent {
render() {
return (
<Row>
this.props.books.map((b, index) => (
<BookComponent
key={index}
title={b.title}
summary={b.summary}
/>
))
</Row>
);
}
}
export class BookComponent extends React.PureComponent {
render() {
return (
<Col md={4}>
<div className="book-item">
<div className="book-title">{this.props.title}</div>
<div className="book-summary">{this.props.summary}</div>
</div>
</Col>
);
}
}
SCSS
.book-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid gray;
.book-title {
font-size: 1.2rem;
font-weight: bold;
}
.book-summary {
font-size: 0.9rem;
}
&:hover {
cursor: pointer;
box-shadow: 1px 1px 5px gray;
}
}

Answer 1

You need to make your .col-md-4 as flex because then only you will be able to stretch the child elements.
.col-md-4 {
flex: 0 0 33.3333333%;
max-width: 33.3333333%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
}