Same height for div's

Question

I want that 3 div's are having the same height.

Picture

HTML

 .more-bottom {
    padding: 4em 0;
    background: #DCEDF9;
    }
    .more-bottom-grids {
    margin: 4em 0 4em 0;
    height: 10px;
    }
    .more-bottom-grid-img img {
    width: 100%;
    }
    .more-bottom-grid-info {
    background: #FFF;
    padding: .5em;
    }
    .more-bottom-grid-text {
    padding: 1em;
    }
    .more-bottom-grid-text h5 {
    margin: 0;
    font-size: .875em;
    color: #383838;
    line-height: 1.8em;
    }
    .more-bottom-grid-text p {
    margin: 1em 0 0 0;
    font-size: .875em;
    color: #BBBBBB;
    line-height: 1.8em;
    }

<div class="container">
			<div class="more-bottom-grids">
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/8.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>Stadhuis</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Korte Minrebroederstraat 2, 3512 GG Utrecht</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/9.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>Stadskantoor</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Stadsplateau 1, 3521 AZ Utrecht</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/10.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>The Wall</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Hertogswetering 183, 3543 AS Utrecht</p>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>

   

How do I get the same height for these 3 blocks? This is on my website, so if you want to you can see it live here.

I have tried to change some things by the img with specific height, but it didn't worked yet.

Answer 1

You should user min-height css property for same div something like that

.more-bottom-grid-info {
background: #FFF;
padding: 0.5em;
min-height: 340px;

}

Answer 2

You really only have two options.

1. Set a min height on each card (the container with white background).
2. Use flexbox, I'd recommend checking out the card group section over at flexboxpatterns for a detailed walktrough.