This is my code:\[code\]<html><head> <style> div#one{ display: inline-block; border: 1px solid green; width: 200px; height: 200px; vertical-align: bottom; } p { border: 1px solid black; } div#sec { display: inline-block; border: 1px solid green; width: 200px; height: 200px; } div{ border: 1px solid black; } </style></head><body><div> <div id="one"> <p>Something here</p> </div> <div id="sec"></div></div></body></html>\[/code\]why the div with id one appears lower than id sec when vertical-align set to bottom. But when I place some text inside div with id sec. The div with id one and sec appears on the same line?