text-align left an right

[Matthias Apsel]

Hallo Tobias,

ich möchte das in einer Textzeile ein Teil links steht und ein Teil rechts. Generell ist es mit float: left and right kein Problem, aber das Problem ist hier mit der Höhe, wenn die beiden Text-Elemente unterschiedlich hoch sind. Wie kann ich die Text-Elemente links und rechts positionieren, allerdings sind die Elemente weiterhin an der Grundline ausgerichtet. Vertical-align: baseline bringt leider auch nichts.

display: inline-block war schon immer eine Alternative zu float. Flexbox ist ebenso geeignet. Ausgehend von folgendem HTML

<p><span>1. Teil</span><span>2. Teil</span></p>

wäre folgendes möglich:

span {
   display: inline-block;
   width: 50%;
} 

/** oder **/

p {
    display: flex;
    align-items: flex-end;
}  

span + span {
   text-align: right;
}

Bis demnächst
Matthias