Вертикальное выравнивание CSS не работает с плавающей точкой

Как я могу использовать vertical-alignи floatв свойствах div? vertical-alignотлично работает, если я не использую float. Но если я использую поплавок, то он не работает. Для меня важно использовать float:rightдля последнего div.

Я пытаюсь следовать, если вы удалите поплавок из всех div, тогда он будет работать нормально:

    
First div, float left,  has more text.
    
Second div, float left 
    
Third div, float right

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

Дж. С. Фиддл