CSS: align two element, to the left and right in the same line without floats

Question

I am trying to align two inline elements, one to the left and one to the right. I\'d like to accomplish this without using floats.

In my case, I have a h1, with a sp

Answer 1

You can use CSS display:table + display:table-cell.

h1 {
  display: table;
  width: 100%;
  margin: 0;
}
h1>span {
  text-align: left;
  display: table-cell;
}
h1>a {
  text-align: right;
  display: table-cell;
}

Align me leftalign me right

Or, do it with display:inline-block.

h1 {
  font-size: 0; /* remove whitespace */
}
h1>span,
h1>a {
  font-size: 32px;
  display: inline-block;
  width: 50%;
}
h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

Align me leftalign me right

Note, either way above will make the clickable area larger, wrap it into another if you need to correct that.