cards not aligning correctly - html

Question

Im trying to display cards in two columns but the cards are not aligning correctly, the top of the card on the right is displaying at the bottom of the column. id like for the cards to be aligned horizontally by the top of each card
img {
width: 269px;
height: 402px;
}
.card-block{
margin: 20px;
}
.btn-dark{
width: 120px;
border-radius: 3px;
}
<div class="container" style="column-count: 2; margin-top: 100px;">
<div class="row">
<div class="col-sm-14 mx-auto">
<div *ngFor="let book of webService.book_list | async">
<div class="card bg-light mb-5 mr-5" [routerLink]="['/books', book._id]" style="cursor: pointer">
<div class="card-header">
<strong>{{book.title}}</strong> by <strong>{{book.author}}</strong>
</div>
<div class="row no-gutters">
<div class="col-auto">
<img [src]="book.imageLink" />
</div>
<div class="col">
<div class="card-block">
<strong>Country of Origin:</strong> {{book.country}} <br />
<strong>Year Released:</strong> {{book.year}} <br />
<strong>Language: </strong> {{book?.language}} <br />
<strong>Pages: </strong> {{book?.pages}}
</div>
</div>
</div>
<div class="card-footer">
<strong>{{book.review_count}}</strong>
review(s) available <br>
</div>
</div>
</div>
</div>
</div>
</div>