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

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;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>

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;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>

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


You can use some flexbox magic:

h1 {
  display: flex;
  justify-content: space-between;
}
<h1>
  <span>Align me left</span>
  <a href="">align me right</a>
</h1>