The reason align-items: baseline; works with flex-direction: row; but not with flex-direction: column; is due to how the flexbox cross-axis behaves. When using flex-direction: row;, the cross-axis is vertical, so align-items: baseline; aligns the content based on the text baseline (the line where the text sits) vertically. This is why you see the text of all items aligning correctly. However, when you switch to flex-direction: column;, the cross-axis becomes horizontal, and since the text is already aligned horizontally by default, using align-items: baseline; does not create any visible difference. If you want to align items by their baselines in a column layout, you should use justify-content: baseline; instead, as it works along the main axis (which is vertical in a column). Alternatively, you can manually adjust the alignment by adding margin-left or padding-left to each item.