Normal flow
Layout means deciding where boxes go. The browser makes one rectangular box for each element here: h1, two spans and p. With no layout rules it places them in normal flow: in source order, by each box's display type.
h1 and p are block boxes: the browser's own stylesheet gives them display: block. Each starts on a new line, below the box before it, and with width: auto it fills its container's whole width, here 344px.
A span is inline: display starts as inline for every element. Inline boxes sit side by side on one line, left to right, each only as wide as its words. When a line is full, the rest wraps onto a new line.
Changing display
Set width: 150px on the spans and nothing moves. The width property does not apply to inline boxes: they stay exactly as wide as their text. To give a span a width, change its display type.
Change the spans to display: block. Each now starts its own line, like h1 and p, and width works: each is 150px wide. The rest of each line stays empty: in normal flow a block box never shares its line.
inline-block mixes the two. The spans sit side by side on one line again, like inline boxes, but each keeps its 150px width, like a block. 150 + a space + 150 is about 304px, which fits in 344px.
display: none removes the box completely. The h1 now takes up no space at all, so every box after it moves up to close the gap. The h1 is still in the HTML; it just makes no box.
Every screen size
Narrow the window to 280px, so the body is 264px wide. The block p shrinks to fit. The two 150px inline-blocks need 304px, which no longer fits, so the second span wraps onto the next line. Same CSS, new layout.
What happens
;; step 1/8 · boxes index.html, inside <body>, in source order: <h1> "Menu" display: block <span> "Tea" display: inline <span> "Cake" display: inline <p> "Open daily." display: block style.css only states the defaults so far, so it changes nothing yet
The page drawing leaves out the margins browsers put above and below h1 and p, and draws every line the same height, so the order is easy to see. Widths in the labels are the real used widths; the two inline boxes are drawn wider than their words so the words fit. Strictly, the two inline spans sit between two block boxes, so the browser wraps their line in an anonymous block box of its own (CSS 2.2, section 9.2.1.1). It changes nothing you can see here.