Align two inline-blocks left and right on same line

html

responsive-design

best-practices

css-grid

byNikita Barsukov·Jan 29, 2025

For a quick solution to align two inline-blocks left and right on the same line, the CSS property float is your friend. Here are the basics:

<div>
  <span style="display: inline-block;">Left</span> 
  <span style="display: inline-block; float: right;">Right</span>
</div>

No hocus-pocus needed, just float the latter element to the right. They will align perfectly like two peas in a pod on the same line.

Flexbox: A modern toolkit for alignment

Flexbox offers a cleaner and more flexible solution. Instead of fighting with floats and clears, aligning elements becomes a breeze.

.container {
  display: flex;
  justify-content: space-between; /* Like pulling a rubber band */
}

Here, justify-content: space-between; works as a peace negotiator, ensuring that the elements maintain their personal space.

Grid layout: The control freak's dream

But wait! Can we afford more control? Yes, with CSS Grid Layout!

.container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* auto: "I'll adjust, no worries!" */
}

CSS Grid takes alignment to the next level. Got a complaint? Grid has you covered.

Whitespace Begone! Embrace zero font size

One of the curveballs inline-block throws at you is the dreaded whitespace.

.container { 
  font-size: 0;  /* Font? Who needs a font! */
}
.container > span { 
  font-size: 16px; /* Oh wait, we need. */
  display: inline-block;
  vertical-align: middle;
}

font-size: 0 is the secret sauce to eliminate whitespace. Never again will your elements get "spacing anxiety".

Backup plan: text-align

Worried about your grandma still using IE7/9? Apply a touch of text-align and witness its magic!

.container { 
  text-align: justify; /* Let's keep it straight, folks! */
}
.container:after {
  content: '';
  display: inline-block;
  width: 100%;
}

Text-align: the fair godmother of Flexbox for older browsers.

Keeping things responsive with Bootstrap

Bootstrap 4: classier alignment solutions for the lazy coder.

<div class="d-flex justify-content-between">
  <span>Left</span>
  <span>Right</span>
</div>

Who said good old Bootstrap isn't cool? Just slap on the correct classes and call it a day!

Floats and absolute positioning: thanks, but no thanks

While floating and absolute positioning can do the trick, the modern CSS warriors greatly discourage this approach. Your future self will thank you.

JavaScript: For real-time alignment

To serve content that is not only pleasing to the human eye but also to handle window size changes, use some JavaScript magic.

window.onresize = function() {
  var container = document.querySelector('.container');
  container.style.textAlign = window.innerWidth > 600 ? 'justify' : 'left'; /* 600px: "The line must be drawn here!" */
};