Hi everyone , I have some problem that I can’t solve.
I have 2 boxes : box1 and box2 . They have width and height equal 200px and display: inline-block so that they are on the same line . Everything is fine here .
But when I change box2’ width to 100px , box1 is pushed down . I don’t know why box1 act like that . Please explain this to me or if you know there is an article on the Mozilla website about this, please attach the link below.
Hi @NoName 
The behavior of the red box doesn’t make sense with this code. There has to be something else interfering. When I recreate your example with CodePen I get the correct behavior:
Are you able to show this strange behavior in an online editor and post a link to it here?
Thanks!
Michael
Hello @NoName
as @mikoMK said i did not face that weird behavior also using jsfiddle
https://jsfiddle.net/8s5qbop0/
so i think it issue in the w3school editor
and have a nice day both of you 
The strange bahavior occurs when you have a long enough paragraph . You try changing “Box1” to “This is paragraph 1” and “Box2” to “This is paragraph 2” . The strange behavior will occur .
You try changing the paragraph in
Thanks for the clarification, @NoName. I didn’t realize the switch to two lines inside “box2”
I could now reproduce the issue. This one was pretty surprising, but I think I know what is going on. I added some additional text before and after the boxes to @justsomeone’s example: https://jsfiddle.net/e8gwr6dq/1/
Now we can see that all the text - outside and inside the boxes - get the same alignment, since they are all inline content of the <body>. Because of the multi-line “box2” all the other parts shift down so the text is on the same height as the last line of “box2”.
Very interesting and thanks for sharing @NoName. I learned something today 
Michael
you can fix that by using flex or grid layout
there tutuorial for both in mdn
or
and here the code using the flex layout Edit fiddle - JSFiddle - Code Playground
and for grid
Thank you @mikoMK . You helped me a lot.
