Question on HTML/CSS

Question

So I've learned some of HTML and CSS and decided I'm ready to start making my own practicing web page. And I encountered a problem I couldn't solve with just google so let me ask here.

When I'm doing an HTML mark up I'm placing elements one after other so they end up being shown the same way on a web page, like in a verical line.

And I want some of my elements to be on the same vertical level, like 2 or 3 paragraphs of a paragraph and a progress bar, etc. on a single horizontal line.

So how can I do that? The only thing I could think of is to make a table and place the elements in table cells, but I feel like there must be a better way.

Answer 1

You can either use Grid layout or Flexbox according to your need. The below link explains the concept better.

About Flexbox here :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
About Grid layout :
https://css-tricks.com/snippets/css/complete-guide-grid/
Now which one is better or when to use either of these :
https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

Answer 2

You're welcome my friend ✌️

Answer 3

Nova Thanks a lot! Will sure check that out.

Answer 4

Use the command "display: inline-block" in CSS. :)

Answer 5

Bootstrap is the easiest way to do it. But CSS Flexbox, Grid and float can also help you to do it.

Answer 6

Nova Damn so I've learned everything about the flexbox from your link and my God that's a gem! It literally does everything I needed. Thanks again buddy!