vertical-align: middle not working

I had three buttons in a single div with uncommon height. I was asked to vertical align the buttons to the middle of parent div. After long time of googling and putting my head into PC, I got the solution:

HTML

<div class="wrapper">
            <div class="block" style="border: solid 1px red;">The red box's height can be dynamic too ;)</div>
            <div class="block" style="border: solid 1px green;">The green box's height is dynamic<br>fdfd</div>
            <div class="block" style="border: solid 1px green;">The green box's height is dynamic</div>
        </div>

CSS

.wrapper {
                border: 2px solid #007EFD;
                display: inline-block;
                white-space: nowrap;
            }
            .block {
                color: #000000;
                display: inline-block;
                font: 12px/1.5 Arial,sans-serif;
                margin: 5px 2px;
                padding: 5px 5px 5px;
                text-align: center;
                vertical-align: middle;
                white-space: normal;
                width: 180px;
            }

Output