CSS - align 3 asides on same vertical line-CodePudding

I'm new to CSS and I'm trying to align 3 blocks (3 aside tags) on the same line vertically.

Here's the code:

https://jsfiddle.net/valiciousssx/1qg2nr7y/1/

So, I have those three asides and I struggle with aligning them on the same line vertically when I resize the width of the browser. I mean, there are points where all are on the same line but usually they don't remain each under another.

I tried to use display: inline-block but I got nothing.

How to solve this?

CodePudding user response：

I achieved it by replacing <br><br> with <br style="clear: both">. Ye can read about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

I tried the pseudoelement solution from MDN and it worked as well (ye don’t need the <br>s in this case at all):

article::after {
  content: '';
  display: block;
  clear: both;
}