The documentation for block-level elements specifies that each block element will start on a new line even if there is enough space left, but what if there is an inline element after the block element? I tried it in my local with below:

<div className="border-2 border-blue-400 w-1/6">Line 1</div>
<span className="border-2 border-emerald-500">Line 2</span>

The above is resulting in two lines, even though there is enough space to fit both elements on the same line. Why is Line 2 being rendered on a separate line?

The documentation for block-level elements specifies that each block element will start on a new line even if there is enough space left, but what if there is an inline element after the block element? I tried it in my local with below:

<div className="border-2 border-blue-400 w-1/6">Line 1</div>
<span className="border-2 border-emerald-500">Line 2</span>

The above is resulting in two lines, even though there is enough space to fit both elements on the same line. Why is Line 2 being rendered on a separate line?

• html
• css

• 5 Because the first one is a block element, which basically means there can't be anything else beside it. – C3roe Commented Mar 4 at 12:33
• 1 There is never space left beside an in-flow block-level element, because its inline margins are automatically adjusted to consume any space that would otherwise be left over. – Alohci Commented Mar 4 at 12:38
• 1 please read the whole page and just don't stick to the first few lines..it will take much less time than asking a question.. since you even posted the link this is the answer to the question By default block elements will consume all of the space in the inline direction – Diego D Commented Mar 4 at 13:10
• Thanks for the inputs @DiegoD , the documentation says "by default" i.e. till the point I haven't explicitly set width, which I have in this case "1/6"th of parent container width. So, even though the documentation states "block elements will consume all of the space in the inline direction", it doesn't apply to this case since I am overriding the width. – Mrityu Commented Mar 4 at 17:03
• 1 The documentation does include the phrase “by default”, but this is misleading and I think those words should be removed. Block-level elements (display: block) always consume all of the space in the inline direction, even when you specify a width. – Brett Donald Commented Mar 5 at 1:18

1 Answer 1

To achieve what you want to achieve, style your <div> with display: inline-block.

div {
  border: 2px solid blue;
  width: 200px;
  display: inline-block;
}

span {
  border: 2px solid red;
}

<div>Line 1</div>
<span>Line 2</span>

For more information on the various values of the display property and what they do, this article explains it fairly thoroughly.