Adding text to div breaks the initial alignment - html

Question

On to the real question. I started learning HTML and I ran into a circumstance that I don't understand why it happens and was hoping someone could explain this to me.
Above is my code and what I don't get is why the introduction of the word text in box1 causes the whole box to be displayed on a new line.
Once the text is removed it realigns. any help is welcome.
I'm going to end this off by saying that I tried pasting in code (using the code blocks button and surrounding my code with <code> and <pre> tags but the editor would not display the code or would break the code block by every second)

Answer 1

Try vertical-align:top; with inline-block.
When we use inline-block we can align blocks in 3 different way's, like if 2 block have large height and one has small then using vertical-align:top; make all three block aligned at top using vertical-align:middle; make these three block aligned middle and using vertical-align: bottom; make these blocks aligned at the bottom side
div {
display: inline-block;
vertical-align:top;
margin: 25px;
}
p {
padding: 10px;
text-align: center;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
#box2 {
width: 100px;
height: 100px;
background-color: blue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="container">
<div id="box1"><p>text</p></div>
<div id="box2"></div>
<div id="box3"></div>
</div>

Answer 2

It is because you have a pixel value for the width and height of all 3 of your divs. The text "increases" the width and pixel value of your divs.
UPDATE
Why not use the float property?
div {
float: left;
display: block;
margin: 25px;
}
p {
padding: 10px;
text-align: center;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
}
#box2 {
width: 100px;
height: 100px;
background-color: blue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
<div id="container">
<div id="box1"><p>text</p></div>
<div id="box2"></div>
<div id="box3"></div>
</div>