Getting elements onto one row used to need tricks. Now there are two real tools: flexbox for a row of items, and grid for a two dimensional layout. Choosing one of those two covers almost every layout you will be asked for.
About 1 min of reading
Put three items on one row.
The container
Before you run it, say out loud what it will print. Then open the answer.
Centre them
Before you run it, say out loud what it will print. Then open the answer.
A toolbar, a list of cards, and a row of icons are flex. A page with a sidebar and a header, or a calendar, is grid. The choice is which direction the layout varies in, and that question is quick.
A layout that works when a label is twice as long as you expected is a layout that does not depend on fixed widths. Fixed sizes look finished and break on the first real text, which is the fastest way to fail a review.
display: flex on the parent puts the children on one line. justify-content spreads them and align-items lines them up. That is the whole tool for a row, and it works without knowing how many children there are.
display: grid with a template names the tracks explicitly. When the layout is genuinely two dimensional, grid states both directions and flexbox states one, which is the reason to pick it.
A div already fills its own line. That default is why things stack without any CSS, and why a layout problem is often 'these should not stack' rather than 'these should'.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.