Question

I have two divs that I would like to be side-by side if the screen is wide enough but if it’s a narrow screen I want them to display one below the other, basically like inline block will do. the problem with inline block is the shorter one is as low as it can go on the ‘line’, like a full stop next to a bigger letter. how can I make the two divs go as high as possible on the ‘line’ so the white space is below the smaller div not above it, more like a quote mark next to a letter

either div could be taller than the other

Answer 1

I think you’re looking for:

vertical-align: top;

However, without seeing your test case it’s difficult to discern whether or not there are other metrics involved that are creating that space, e.g., margin, padding etc.