Big height out of nowhere - html

Question

Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}

Answer 1

Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.