Bootstrap btn-group with same height

Question

I'm using Bootstrap3 and I have some buttons in a row. For having the same width depending to the screen size I use btn-group-justified and it works well. But the labels of my buttons have some words and glyphicons and I set a possibility for line-breaks by white-space:normal. But in this case the buttons have some times the wrong height. How can I force all buttons to have the same height?

<div class="btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button one</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button Two</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button Three and Breaky</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button Four</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button Five</button>
    </div>
</div>

And my Style:

button {
    white-space: normal !important;
}

Here is a jsfiddle-Link to show the challenge.

Edit: Added evidence of responsive design.

Answer 1

Please try this, hopefully it'll work. This will keep consistency among the button's height in any screen size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.btn-group-justified .btn').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.btn-group-justified .btn').height(highestBox);

});
</script>