[SOLUCIONADO] Alinear texto directamente

[iakrod]

Buenos días.



Quiero alinear los títulos por la derecha para que todos los ":" queden en la misma posición vertical. Y lo mismo con el texto pero alineados por su izquierda.
Se que esto se puede solucionar creando un div para los títulos y otro para el texto pero me gustaría saber si se puede solucionar aplicando css directamente al texto.

El código que he utilizado es el siguiente:

Código HTML:

<div id="informacion">
   <span class="texto_izq">Títulooo1:</span><span class="texto_der">Texto texto texto texto texto texto1</span><br><hr>
   <span class="texto_izq">Títuloo2:</span><span class="texto_der">Texto texto2</span><br>
   <span class="texto_izq">Títuloooooo3:</span><span class="texto_der">Texto texto texto texto 3</span><br>
   <span class="texto_izq">Títuloooo4:</span><span class="texto_der">Texto texto texto4</span><br>
</div>
 

Código CSS:

.texto_izq {
    position: relative;
    left: 10px;
    font-weight: bold;
}
.texto_der {
    position: relative;
    left: 50px;
}
 

[pzin]

Podrías usar display: table, display: table-row y display: table-cell. O darle un ancho fijo y alinear el texto a la derecha en el primer span.

[iakrod]

Gracias pzin.

Con tu consejo he conseguido arreglar una parte del problema pero me ha surgido otro diferente, por lo que al final he decidido hacerlo "bien" y le he añadido un div a los títulos y otro al texto, y ya lo tengo todo como quería.

Saludos!