Keep multiple elements same hight and verticalu aligned - html

Question

I am struggling with a challenge in a project I am working on.
JSFiddle example
I want to have all the buttons the same height.
when on a large screen they are all good.
But when i start to scale down they start getting different heights.
And this is an expected result.
But the people that are pulling the strings on this page want all buttons to be the same height.
When one text goes to the next line and makes the button bigger every button most get the same height.
this goes for all widths of the viewport.
I hope you can help me with this challenge.
For any more info I will update the question as soon as possible.
PS. I don't want to use CSS3 for this as it want to keep the Backwards Compatibility as high as possible.
because i have to add code here, this is the situation of my html.
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a short text
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a long text like this
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a long text that is even longer tha the previous button
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a short text
</div>
</div>
</div>

Answer 1

Flexbox might be your easier solution, I've found an article that tries to solve the problem you have.
Check this article: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
Code:
.row {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.button-primary {
background-color: #005f96;
color: white;
font-size: 20px;
margin: 2%;
display:flex-item;
width: 21%;
}
Demo:
https://jsfiddle.net/x2cqqcz7/
Extra:
I've removed the wrapping divs around buttons and also you'll probably use media queries.

Answer 2

This is a basic jQuery code I wrote for a similar project:
var eqheight = 0;
$('.col-eqheight-sm').each(function() {
if( $(this).outerHeight() > eqheight) {
eqheight = $(this).height();
}
});
$('.col-eqheight-sm').height(eqheight);
It loops through each child and updates the height accordingly.
P.S Advised to wrap it inside a viewport width checker if you only want to work for specific resolutions. Also, add a window resize listener if you want it to update each time the viewport changes.