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>