How to get boxouts like Harvard Business Review in WordPress?

I am not really keen on the specific styling, but I can take care of that if I can implement this functionality. I am hoping i can find a shortcode or a plugin (or shortcode plugin) to accomplish this.

Problematically for Googling a solution is the fact that in magazines these are usually called sidebars (and they are called sidebars in the code here too).

You will see that most of them, on a desktop, first show as a half-width column, compressed also vertically showing a title and a bit of a peak at the contents. When you click on the “Read more” it expands to full width and to the full height of the contents.

ON small devices they are always full-width and are only shorter when closed, taller when opened.

https://hbr.org/2012/07/the-end-of-solution-sales

I think there is great potential for some rich articles with this kind of feature. The closest thing I have been able to find is a toggle, which works almost identically to the way this boxout works on a phone or other small device. But the 1/2 width to full-width expansion on open I can find nowhere.

Of course, it doesn’t help that the terms callouts, asides, excerpts, quotations, boxouts, callout boxes etc are all used completely ambiguously and almost interchangeably. Everywhere but WordPress sidebar would be in that list too.

But surely what the Harvard Business Review has done here is not THAT difficult. Is it?

Thanks in advance. Hoping someone can point me in the right direction.