vertikal ausrichten Spannen nach links

Question

Ich versuche, die linke Seite der Spannweite auf das rechte Ende der vorherigen span auszurichten, aber es funktioniert nicht.

Hier ist ein vereinfachtes Beispiel: https://jsfiddle.net/regc/udjgufrz/

<span class="big">start big</span> 
<span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span> 

Ich mag der kleinere Text vertikal rechts von größeren ausgerichtet werden.

BIGGER smaller text 
     smaller text 

Ich habe versucht, Divs zu verwenden, aber in diesem Fall beginnt der kleinere Text von der neuen Zeile.

Answer 1

Überprüfen Sie die unten aktualisiert Geige hoffen, dass es .I position:absolute;

verwendet hilft vertically align span's left Fiddle Demo

Answer 2

Okay, mit vertikaler Ausrichtung, könnte es so aussehen:

.wrap span { 
 
    display: inline-block; vertical-align: middle; width:49.5%; 
 
} 
 
.big { 
 
    font-size:50px; 
 
} 
 

 
.small { 
 
    font-size:30px; 
 
}

<div> 
 
    <p>here it is:</p> 
 
    <div class="wrap"> 
 
     <span class="big">start big</span> 
 
     <span class="small">continue with smaller ones. continue with smaller ones. continue with smaller ones. </span> 
 
    </div> 
 
</div>

Aber ich würde Flexbox verwenden. Ist das eine Option?

Answer 3

Einfach einfach hinzufügen float:left für .big Klasse.

.big { 
    font-size:50px; 
    float:left; 
    margin-right:10px; 
} 

https://jsfiddle.net/udjgufrz/3/