Esta pregunta es una tontería pero estoy tan acostumbrado a bootstrap
que esto no lo he hecho hace siglos con css
, el problema es que tengo un newsletter en el que se envían datos y quiero que la columna de la derecha este recta a una distancia,quiero hacerlo con css
y no con grids
adjunto una imagen
Este es el div
que genera la imagen anterior:
<div style="color: #0D0D0D; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; line-height: 150%; padding: 20px 10px 10px;">
<div style="font-size: 12px; line-height: 18px; font-family: 'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; color: #0D0D0D;">
<p style="font-size: 14px; line-height: 21px; margin: 0;" align="left">
<span style="color: #ec4d34; font-size: 14px; line-height: 21px;">
<strong style="line-height: inherit;">
Estos son los datos para tu presupuesto:
</strong>
</span>
</p>
<ul style="line-height: inherit;">
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 10%;width: 10%">Nombre:</span>
<span style="font-weight: normal;margin-left: 5%">{{nombre}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 12%;width: 10%">Email:</span>
<span style="font-weight: normal;margin-left: 5%">{{email}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 10%">Teléfono:</span>
<span style="font-weight: normal;margin-left: 5%">{{telefono}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 2%">Plazas Necesarias:</span>
<span style="font-weight: normal;margin-left: 5%">{{plazas}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 7%">Fecha Inicio:</span>
<span style="font-weight: normal;margin-left: 5%">{{inicio}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 9%">Fecha Fin:</span>
<span style="font-weight: normal;margin-left: 5%">{{fin}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 11%">Origen:</span>
<span style="font-weight: normal;margin-left: 5%">{{origen}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 10%">Destino:</span>
<span style="font-weight: normal;margin-left: 5%">{{destino}}</span>
</li>
<li style="font-size: 12px; line-height: 18px;font-weight: bold;">
<span style="padding-right: 4%">Observaciones:</span>
<span style="font-weight: normal;margin-left: 5%">{{observaciones}}</span>
</li>
</ul>
</div>
</div>
<span>
Lo que yo haría es: 1. Borrar los estilos de este<span>
y 2. en el CSS:li span:nth-child( 1 ){display:inline-block; width:200px}
. Dondewidth:200px
es solo un ejemplo. Esto tendría que ser la anchura de la primera columna.