Fixed Height for overview-box - html

Question

I would like to fix the height of each box while using this style.
Here is my CSS and HTML code for this overview-boxes for reference. Probably you will not get the same UI as mine, picture that I put is what I am trying to fix.
If the span gets longer values box height automatically increases. I would like to prevent that outcome while still using this format of overview-items
.ohs-text-overview h2{
font-weight: 300;
color: #fff;
font-size: 36px;
line-height: 1;
margin-bottom: 5px;
}
.ohs-text-overview span{
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
}
/* ----- Overview ----- */
.ohs-overview-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#media (max-width: 767px) {
.ohs-overview-wrap {
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ohs-overview-wrap .button {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.ohs-overview-wrap h2 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.ohs-overview-item {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
padding-bottom: 0;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
#media (min-width: 992px) and (max-width: 1519px) {
.ohs-overview-item {
padding-left: 15px;
padding-right: 15px;
}
}
.ohs-overview-item--c1 {
background-image: -moz-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
background-image: -webkit-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
background-image: -ms-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
}
.ohs-overview-item--c2 {
background-image: -moz-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background-image: -webkit-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background-image: -ms-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}
.ohs-overview-item--c3 {
background-image: -moz-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
background-image: -webkit-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
background-image: -ms-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
}
.ohs-overview-item--c4 {
background-image: -moz-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
background-image: -webkit-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
background-image: -ms-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
}
.ohs-overview-box .icon {
display: inline-block;
vertical-align: top;
margin-right: 15px;
}
.ohs-overview-box .icon i {
font-size: 60px;
color: #fff;
}
#media (min-width: 992px) and (max-width: 1199px) {
.ohs-overview-box .icon {
margin-right: 3px;
}
.ohs-overview-box .icon i {
font-size: 30px;
}
}
#media (max-width: 991px) {
.ohs-overview-box .icon {
font-size: 46px;
}
}
<div class="row m-t-25" id="corrective_action_summary_ii" style="text-align: center;">
<div class="col-md">
</div>
<div class="col-sm">
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>1</h2>
<span>Action Will Described</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>1</h2>
<span>Action Is In Progress</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>0</h2>
<span>Action Completed</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
</div>
</div>

Answer 1

.ohs-overview-item {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
padding-bottom: 0;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
min-height: 120px;
}
adding min-height has solved my problem thanks to gpl