Make the models to be inline

Question

I made this page to help me remember the html5 content models.

Can you please find a way to make the items appear inline?

I used the class "child" to format each table
But when I put display: inline; every goes wrong

EDIT: Sorry I forgot to paste the link : -,
https://code.sololearn.com/WyAiZ6tXLFbZ/?ref=app

Answer 1

The main mistake of your css is elsewhere, at the 'container' class declaration: you set the width to 100vh, wich is related to the viewport HEIGHT... I guess you want rather set it to 100 vw (viewport width)...

Anyway, I don't right understand how you want display your stuff, but it could be fixed only by changing it... but else, if 'inline' will still not do the job, you can try 'inline-block' as well ;)

Answer 2

Thank you @visph. inline-block works ^^

https://code.sololearn.com/WyAiZ6tXLFbZ/?ref=app