如何在调整文字大小时确保项目保持相同高度？

Question

If the window resizes the text "pushes itself" and the buttons get pushed down.

The button s are all over the place. I want the buttons to be at the same place.

Check external fiddle to be able to resize to desktop

Answer 1

The issue is your button s will place themselves in reference to text content.

EDIT: I just noticed you were using flex, so why not take advantage of it.

Solution 1: flexbox

---> JS Fiddle <---

Solution 2: min-height

You could set a min-height value on p similar to the longest text, for example in the fiddle I used 180px , but note you may have gaps between button s and text if the latter is very short and this will also vary depending on the viewport's width, since if reduced will shrink text and push it down overflowing the min-height , try to find a balance.

Add min-height to section article p . (adjust value to your benefit - note that p 's border was added simply as reference of the height).

---> JSFiddle <---