Recommended Free Tools
For a deliberate three-item row, wrap the spans in one parent and set that parent to display: flex. Flexbox places the parent’s direct children in a horizontal row by default, while gap controls spacing.
Use a flex parent for a designed row
Give all three spans a shared parent, then make the parent a flex container:
<div class="row">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>.row {
display: flex;
gap: 1rem;
}Adding display: flex creates a flex formatting context, so the parent’s direct children become flex items. The default flex-direction is row in the usual horizontal writing mode. See MDN’s display property reference and its Flexbox guide.
Equal-width spans
Add flex: 1 to each item only when the three spans should share the available width equally:
.row span {
flex: 1;
}Simple side-by-side placement does not require widths. Fixed or percentage widths are appropriate only when you need constrained columns.
Alignment and spacing
gap: 1remsets consistent space between items without adding margins to individual spans.align-itemsaligns items across the row, such asalign-items: center.justify-contentdistributes free space along the row, for examplejustify-content: space-between.
Make the row responsive
Flex items can shrink by default. If the row should move items onto additional lines when its container becomes narrow, enable wrapping:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}Without flex-wrap: wrap, the items remain on one flex line and may shrink or contribute to overflow depending on their content and other constraints. Choose the behavior that matches your design and test it at the actual container width.
When you do not need Flexbox
span is inline by default. Three adjacent spans in ordinary text flow already sit on the same line when enough horizontal space exists and wrap like text when the line is too narrow:
Free tools Windows power users keep installed
One-click scans. No signup required.
<p><span>First</span> <span>Second</span> <span>Third</span></p>Use this normal inline flow for pieces of prose. It naturally follows text wrapping, but it does not provide the same explicit item sizing, alignment, or controlled layout as Flexbox. MDN explains these rules in block and inline layout and the inline formatting context.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Alternative: inline-block
Setting each span to display: inline-block gives inline placement with block-like sizing:
.row span {
display: inline-block;
margin-right: 1rem;
}This older, simple approach has a drawback: whitespace and newlines between inline-block elements in the HTML can create visible gaps. Flexbox’s gap makes spacing and alignment more direct.
Quick Recap
Best Value
Common mistakes
- Put
display: flexon the common parent, not independently on each span. The parent controls the children’s layout. - Do not set
flex-direction: columnif the desired result is horizontal; that explicitly stacks the items vertically. - Use table markup when the content is genuinely tabular data. Styling spans to imitate rows and columns does not provide table semantics for assistive technology.
- Keep the spans as direct children of the flex container unless an extra wrapper is intentional; only direct children become flex items.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →
