html - Adding text to div breaks the initial alignment -

on real question. started learning html , ran circumstance don't understand why happens , hoping explain me.

above code , don't why introduction of word text in box1 causes whole box displayed on new line. once text removed realigns. welcome.

i'm going end off saying tried pasting in code (using code blocks button , surrounding code <code> , <pre> tags editor not display code or break code block every second)

try vertical-align:top; inline-block.

when use inline-block can align blocks in 3 different way's, if 2 block have large height , 1 has small using vertical-align:top; make 3 block aligned @ top using vertical-align:middle; make these 3 block aligned middle , using vertical-align: bottom; make these blocks aligned @ 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>