Выровнять два встроенных блока div с содержимым

Question

У меня есть два встроенных блока div, каждая 50% -ная ширина его родительского элемента, и они правильно отображаются рядом друг с другом. Но, когда я добавить ссылку на один из этих див, есть разрыв в верхней части второго DIV

<div class="wrap"> 
    <div class="resizable resizable1"> 
    <a href="#" class="link1">link1</a> 
    <a href="#" class="link2">link2</a> 
    </div><!-- 
    --><div class="resizable resizable2">second</div> 
</div> 

.wrap { 
    width: 100%; 
    font-size: 0; 
} 
.resizable { 
    width: 50%; 
    height: 120px; 
    background-color: coral; 
    display: inline-block; 
} 
.resizable2 { 
    background-color: lightblue; 
} 
.resizable a { 
    font-size: 12px; 
} 

Jsfiddle например http://jsfiddle.net/KyEr3/455/

Как выровнять две див?

Answer 1

При использовании display: inline-block элементов по умолчанию устанавливаются в baseline, вместо этого установить vertical-align: top

.resizable { 
     width: 50%; 
     height: 120px; 
     background-color: coral; 
     display: inline-block; 
     vertical-align: top; 
} 

FIDDLE

Answer 2

Вы также можете плавать их как слева, они будут выровнены рядом друг с другом в обертке.

.wrap { 
    width: 100%; 
    font-size: 0; 
} 
.resizable { 
    width: 50%; 
    height: 120px; 
    background-color: coral; 
    display: inline-block; 
    float:left; 
} 
.resizable2 { 
    background-color: lightblue; 
    float:left; 
} 
.resizable a { 
    font-size: 12px; 
}