Help on why this happens!

Code Feedback
1

Hi there! Please help on explaining why does the #sidebar element position on this basic layout goes to the bottom leaving a huge space above (relative to its sibling) when having a child.

https://codepen.io/arturogascon/pen/LYpEezQ

Than you very much!

2

instead of using display: inline-box to align things use flexbox.

body{
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#header{
  width: 100%;
  height: 20%;
  background: blue;
}
#sidebar{
  width: 29.4%;
  height: 75%;
  background: green;
}
#main{
  background: red;
  width: 70%;
  height: 79%;

}

this https://flexboxfroggy.com/ is an amazing resource to learn the flex layout

if you wanna use display:inline-block for your layouts do

#sidebar{
  display: inline-block;
  width: 29.4%;
  height: 75%;
  background: green;
  vertical-align: top;
}

https://iamsteve.me/blog/entry/inline_block here is a resource to learn more

3

Thank you very much silicon.child, I was able to solve the issue if I choose to have inline-block element but it is not clear to me why does the element vertical aligns at the bottom when having a child with text, any ideas?