I can't stop getting two pieces of text to go beneath another, instead I want them to be side by side

Question

When using this code:

<h2>Text</h2>
<h2>More Text</h2>

It ends up like this:

Text
More Text

For some reason, it feels as though there is an invisible barrier to the right of the two texts, preventing me from placing them side by side. (or even to the opposite side of the screen).

This is what I want it to look like:

Text                             More Text

Learn about block and inline elements in HTML and CSS. Very beginner stuff. https://developer.mozilla.org/en-US/docs/Web/CSS/display — j08691, Jul 06 '23 at 16:51
Does this answer your question? [Two divs side by side - Fluid display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — Heretic Monkey, Jul 06 '23 at 17:00
just use it inside of flex parent, then control em as you like — Omar Zaoujal, Jul 06 '23 at 17:09
@Heretic Monkey OK, answer deleted. Will try to follow this rule. — Md. Rakibul Islam, Jul 06 '23 at 17:12
Does this answer your question? [Header (h1) takes up a lot space to the right](https://stackoverflow.com/questions/54519429/header-h1-takes-up-a-lot-space-to-the-right) — sadeq shahmoradi, Jul 09 '23 at 06:13

sadeq shahmoradi · Accepted Answer · 2023-07-09T05:49:14.533

In HTML, there are two types of elements: block and inline.

The h2 element is a block element.

According to w3schools

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). An inline element does not start on a new line. An inline element only takes up as much width as necessary.

for example :

.border-red{
  border: 1px solid red;
}

<span class="border-red" >Hello World (span element is an inline)</span>
<button class="border-red" >Hello World (button element is an inline)</button>

<h2 class="border-red" > Hello world (h2 element is a block) </h2>
<p class="border-red" > Hello world (p element is a block) </p>

You can modify these behaviors using CSS.

.border-red {
  border: 1px solid red;
}

.inline {
  display: inline
}

.block {
  display: block
}

<span class="border-red block" >Hello World (span element is inline)</span>
<button class="border-red block" >Hello World (button element is inline)</button>

<h2 class="border-red inline" > Hello world (h2 element is a block) </h2>
<p class="border-red inline" > Hello world (p element is a block) </p>

I can't stop getting two pieces of text to go beneath another, instead I want them to be side by side

1 Answers1