получает 2 DIV-х рядом друг с другом и центрирования

Question

я получил 2 дивы рядом друг с другом следующим образом:

#container{ 
    text-align: center; 
} 
#div1, #div2{ 
    display: inline-block; 
    width: 40%; 
} 

div1 имеет форму, проблема заключается в том, что элементы в виде получили искажены после я применил стиль для #container. Элементы были ранее выровнены как в this fiddle. Но теперь они like this.

Как получить элементы, выровненные так, как они были раньше?

Answer 1

Вам необходимо ограничить входные элементы до 50%, а вместо display: inline-block (который создает пробелы между элементами), работайте с float: left.

label{ 
    width: 50%; 
    text-align: right; 
    float: left; 
    clear: both; 
} 
p input { 
    width: 50%; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float: left; 
} 

JSFIddle

Answer 2

Wrap все внутри Алабель, а затем see if this suits your purpose

form, #movies_booked { 
    width: 45%; /* ammended*/ 
    display: inline-block; 
    vertical-align: text-top; 
} 
label { 
    width: 100%; 
    text-align: left;/* ammended*/ 
    float:left;/* added */ 
    word-break:break-all; 
} 
label > input, label > select, label > span { 
    float:right; /* added */ 
} 

Answer 3

Текст-Align: центр в теле влияет на все элементы, просто использовать:

form p { 
    text-align: left; 
} 

Чтобы перестроить текст в форме.

В вашей fiddle