Inline-block and movement of first child div - html

Question

I just started learning CSS, now stuck at this part. what makes the brand class to move down when information class is inline-block-ed? Doesn't information comes after brand so it shouldn't affect the brand class?
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF
</div>
<div class="information">
</div>
</div>
<div class="mainbody">
</div>

Answer 1

By default the vertical-alignment of text is baseline. The difference in the height is what makes it. If you have this CSS rule:
vertical-align: top;
Or whatever it is perfect, it looks alright. See below:
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
And now the difference or the white line is because of the border, which can be made by using box-sizing: border-box.
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>