I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px.
If I switch the inner divs to float left instead of utilizing inline-block, they behave as expected.
The code snippet looks like this:
Note: I've applied box-sizing:border-box. Therefore, I anticipated that both inner divs would be precisely 200px even with the 1px border.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
}<h1>Why are these appearing on two lines?</h1>
<div class="container">
<div class="inner">Testing out the border box property</div>
<div class="inner">Second div</div>
</div>