How to align two elements on the same line without changing HTML

html

responsive-design

css-properties

layout

byAlex Kataev·Jan 5, 2025

Are your HTML elements socially distancing themselves too much? Bring them closer with CSS Flexbox or CSS Grid:

Flexbox:

.parent { 
  display: flex; 
  /* No more loneliness, kids! */
}

Grid:

.parent { 
  display: grid; 
  grid-template-columns: 1fr 1fr;
  /* Equal rights for equal columns! */
}

Apply to the parents and watch the children get in line without any HTML interference.

Inline-block: alternative to flex and grid

When flex and grid are busy, invite display: inline-block;. This CSS property makes elements behave like text, lining up one after another:

.first-element, .second-element { 
  display: inline-block; 
  /* "C'mon kids, let's play snake!" */
}
.first-element { 
  margin-right: 10px;
  /* "Leave your brother some space!" */ 
}

Fine-tuning your alignment: Challenges and solutions

Block wrapping and overflow handling

Elements dancing around? Use white-space: nowrap; on your parent container to keep them in line:

.container { white-space: nowrap; }

If they continue outside, invite them back in with:

.container { overflow-x: auto; }

Spacing elements: A game of margin

A delicate art — spacing. margin-right on the first element is good, but sometimes margin-left on the second one provides that extra tidiness.

Alignment pitfalls: Negative margins

Be aware! Negative margins may cause overlapping content. Not a fun game for your users or your accessibility score.

Responsive design: From desktop to mobile

For responsive design, consider percentage-based margin or max-width on elements. Minimal coding, maximum friendliness to screens of all sizes.

Advanced alignment: Going beyond basics

The parent ordeal: Know your container

Parent containers hold the key in the kingdom of floats and inline-blocks. Dress them right, with the appropriate CSS properties.

Seeing is believing: Tools to visualise your layout

Use tools like JSFiddle for real-time debugging and adjusting. CSS adjustments are easier with instant visual feedback. Check out the included JSFiddle example.

The dynamic nature of content: Test and adjust

Remember, content changes can spoil your alignment. Create a robust CSS setup that is both adaptable and scalable.

Final considerations: More than alignment

To excellently align elements without changing HTML, it's critical to understand a few more things:

Test to understand the nuances of behavior across different content and browsers.
Prepare fallbacks for older browsers that might not support flex or grid.
Use developer tools to inspect and tweak your layout in real-time.
Understanding that CSS is an art with countless ways to achieve the same effect.