My goal is to design a simple layout with two divs positioned side by side, but they have different heights. I expected the smaller div to align at the top, but it's showing up at the bottom instead. Is this normal behavior within the page flow?
<body>
<div>
<div class="left debug-green"></div>
<div class="right debug-red"></div>
</div>
</body>
body {
font-size: 0;
}
.left {
width: 50%;
height: 30px;
display: inline-block;
}
.right {
width: 50%;
height: 20px;
display: inline-block;
}
.debug-red {
background-color: rgb(255, 0, 0);
}
.debug-green {
background-color: rgb(0, 255, 0);
}
Take a look at this example on jsFiddle: