Again, this article has to do with understanding default display value before attempting changes. An HTML element could be either inline or block.
Most used inline elements: a, img, br, span, input, label
Often used inline elements: button, code, em, strong, textarea, select
Most used block elements:
Change default display
Diplay can be decomposed in two directions: outer (element's participation in flow layout) and inner (sets layout of children).
Use display property and set it to block or inline - this defines outer direction
Depending on your intent, you may also want to consider using flex value to manage the inner direction
Note that you can use precomposed values containing both outer and then inner instructions such as inline-flex or inline-block.
Zoom on inline-block
Using inline-block you can transform a block element into an inline element, with a width set. Just remember that your two elements must be on the same line to fit into a 100% width. Use a wrapper to set space between elements. Full demo can be found on CodePen. In the following example, p elements will be displayed side by side.
CSS
p {
display: inline-block;
width: 50%;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec neque ut dolor vehicula malesuada.</p><p>Aliquam ornare, orci elementum gravida congue, augue eros congue diam, nec vehicula velit velit non
orci. In eget sem nunc. Nulla facilisi.</p>