Two labels sit side by side, but the moment a container becomes a flex box, the surrounding sentence breaks onto a new line. The behavior is easier to predict when you separate how an HTML element displays among its neighbors from how it arranges its children. Try the same small example with a block, an inline CSS display, and two flex variants to see both decisions at work.

Start with one small layout

Save the following as an HTML file and open it in a browser. The text before and after the group makes the group’s position visible; the borders reveal the boxes inside it.

<p class="sample">
  Before
  <span class="group">
    <span class="item">Alpha</span>
    <span class="item">Beta</span>
  </span>
  After
</p>

.sample { border: 1px solid #777; }
.group { background: #e4f2ff; }
.item { border: 1px solid #246; padding: 2px; }

Put the CSS in a <style> element in the document’s <head>, or link a stylesheet. With no display declaration, the spans are inline by default. The words and the two bordered items appear in the same paragraph flow, wrapping when there is not enough room. Whitespace in the markup can create visible spaces between inline items.

When displaying an HTML element, the two questions behind an HTML display choice are: how does the group participate in its parent’s layout, and how are the group’s contents laid out? CSS calls these the outer and inner display types. In this example, the paragraph is a block container in normal flow; later, the group will become a container for its two direct children. The MDN display reference describes these types and their combinations.

Give the group a block box

Add this rule to the stylesheet:

.group { display: block; }

In normal flow, the group now starts on a new line and, with its default automatic width, generally fills the available inline space. “After” continues below it. The display of this HTML element changes, but the inner layout remains ordinary flow: the two child spans still sit alongside each other if they fit. Changing the parent’s outer behavior has not automatically turned its children into blocks.

A css display: block declaration is useful for a section that should occupy its own line, such as a full-width notice. You can set a width on the block, but a narrower width does not make neighboring normal-flow text fill the unused space beside it. The block still takes its own place in the flow.

The example uses a span to make the transformation visible; it does not mean every section should be marked up as a span. Choose HTML for meaning and structure, then use CSS to control presentation. A display change does not rewrite the document’s semantics.

Display Inline CSS: Stay in the text flow

Replace the group’s display declaration with display: inline. The group now flows with “Before” and “After,” and its contents remain in normal inline flow. If the line is too narrow, the text and inline content can wrap. With display inline CSS rules, the group participates in the line rather than reserving a separate row.

CSS inline display settings affect the box, not the meaning of the markup. An ordinary non-replaced inline box does not accept width and height as a block box does. Its content determines the space it occupies in the line. Horizontal padding and borders can be useful, but vertical padding and borders do not increase line-box height in the same way as a block’s dimensions; they can overlap nearby lines. An inline display in CSS is therefore a good fit for a small phrase or link within a sentence, not for every component that happens to be short.

To give a small component a settable width and height while keeping it in the line, try display: inline-block. It participates inline on the outside but creates a block container inside. Unlike ordinary inline text, the inline-block is treated as one box in the surrounding line and can wrap as a unit.

Make the children flex items

Now replace the group’s value with display: flex and add a gap. This changes how the HTML group is displayed and how its children are arranged:

.group {
  display: flex;
  gap: 8px;
}

The outer behavior is block-level, so the group takes its own line in this normal-flow example. Its inner behavior is flex layout: the two direct child spans become flex items. By default, they are arranged along a row, and gap puts space between them. The group’s text neighbors are not flex items because they are outside it.

This distinction is the reason a block display in CSS and a flex display can look similar from outside while producing different arrangements inside. With block, the children here remain inline content; with flex, the parent manages them as flex items. A flex item can itself contain normal-flow children unless its own display value changes their layout.

Flex items can shrink when space is tight. To allow them to move onto additional rows, add flex-wrap: wrap; otherwise the default is nowrap. A CSS block display may be enough for a simple notice, but flex is useful when its direct children need controlled spacing or alignment.

Keep flex layout inside an inline box

Change the value once more to display: inline-flex. The children remain flex items, but the group itself now participates inline with the surrounding words. It behaves as a single inline-level box; if there is insufficient space, the group can move to the next line as a unit. The css inline-flex value is useful for a compact badge containing an icon and label, where internal alignment matters but the badge belongs in a sentence.

An inline flex container in CSS still has a flex layout inside. CSS display values for inline elements can therefore create different inner layouts. It is not equivalent to display: inline, which leaves this example’s children in ordinary flow. In the two-keyword syntax, inline flex expresses the same outer and inner pairing; block flex corresponds to flex.

Check the rule that actually wins

You can put a one-off declaration directly on an element with an HTML style display attribute, for example style="display: flex". For a reusable component, a stylesheet class is usually easier to maintain than a display style in HTML. An HTML element’s style for display may also be affected by competing declarations, media queries, or a parent’s layout.

If the displayed HTML layout surprises you, inspect the group in browser developer tools and check its computed display, its parent, and any crossed-out declarations. An element’s HTML display behavior can be changed by its context: for example, a direct child of a flex container is a flex item, so assumptions based only on normal block and inline flow may not apply.

Choose the outer behavior first: if the component belongs within a line but its children need flex alignment, use inline-flex.