html - Difficulty aligning form elements to look correct and be responsive -

html - Difficulty aligning form elements to look correct and be responsive -

i'm having difficulty aligning form elements this:

right looks this:

any thought how can prepare it, i've been trying css far nil seems working. furthermore, doesn't seem responsive, when scale downwards browser window there lot of overflow. code far:

css

.bookings { background-color: #fff; border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-top: 2%; } .bookings h1 { font-size: 25px; text-align: center; color: #f3c; } ::-webkit-input-placeholder { color: blue; } .bookingform input, .bookingform textarea, .bookingform select { border: 1px solid #000; } .bookingform { border: 1px solid #000; border-style: solid; padding: 1em; margin: 2em; } .bookingform textarea { width: 30%; height: 60%; } .option label { display: block; width: 20em; text-align: right; margin-right: 20em; } input#time { display: inline; } .bookingform input type=["checkbox"] { float:right; }

jsfiddle: http://jsfiddle.net/zqqb62j8/1/

reduced width , right margin of labels, , set them inline-blocks. also, removed inputs them, don't need label's children, siblings:

.option label { display: inline-block; width: 10em; text-align: right; margin-right: 2em; }

see looks first 3 elements: http://jsfiddle.net/zqqb62j8/2/

update

here's more simple/readable example, similar wanted: http://jsfiddle.net/zqqb62j8/7/

html css responsive-design