Alinear elementos de formulario en css

Soy nuevo en CSS y tengo un formulario de inicio de sesión simple que bash alinear correctamente. Básicamente dos columnas con las tags y el botón Iniciar sesión en una columna y los cuadros de texto en otra columna. ¿Cómo hago esto en CSS?

El código html es

 

Este es un enfoque que funciona:

 form { width: 80%; margin: 0 auto; } label, input { /* in order to define widths */ display: inline-block; } label { width: 30%; /* positions the label text beside the input */ text-align: right; } label + input { width: 30%; /* large margin-right to force the next element to the new-line and margin-left to create a gutter between the label and input */ margin: 0 30% 0 4%; } /* only the submit button is matched by this selector, but to be sure you could use an id or class for that button */ input + input { float: right; }​ 

Demostración de JS Fiddle .

Ajuste las dimensiones y los márgenes para adaptarse a su estuche de uso y, por supuesto, su estética.

Por lo que estás preguntando, simplemente los pondría en una mesa.

  

Esto es lo que se verá en http://jsfiddle.net/wCSAn/

Respondí esta pregunta en mi blog: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/

Se refiere a este violín: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Spoiler: float: right; es la dirección correcta, pero requiere un poco más de atención para obtener buenos resultados.

También puede usar la propiedad de posición en css para alinear su etiqueta y entrada de cierta manera específica como desee. De esta forma, se organizan de acuerdo con el elemento padre.

 form{ position: relative; width: 70%; text-align: right; } label{ width: 30%; position: absolute; left: 10%; text-align: right; margin-right: 30px; } input[type=submit] { position: absolute; left: 25%; background-color: #9AE5F8; } 

Aquí está el enlace a su jsfiddle