html - how to divide the input into two in single line -

In the code given below, I am getting one from an input field, but I want to display it as a single line I want to show two input fields.

Can anyone help me

Updated HTML

  & lt; Div & gt; & Lt; Input type = "text" name = "name" class = "login-input" placeholder = "name" autofocus & gt; & Lt; Input type = "password" name = "password" class = "login-input" placeholder = "password" & gt; & Lt; Input type = "text" name = "father_name" class = "login-input" placeholder = "father's name" autofocus & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "text" name = "mother_name" class = "login-input" placeholder = "mother's name" autofocus & gt; & Lt; Textarea type = "text" name = "adress" class = "login-input" placeholder = "address" cols = "40" rows = "6" autofocus & gt; & Lt; / Textarea & gt; & Lt; / Div & gt;  

CSS:

  .login-input {display: inline-block width: 100%; Height: 37px; Margin-down: 20px; Padding: 0 21px; White color; Lesson: 0 1 px black; Background: # 2b3e5d; Border: 1 px solid # 15243b; Border-top-color: # 0d1827; Boundary-radius: 4px; Background image: -webkit-linear-shield (top, RGBA (0, 0, 0, 0.35), RGBA (0, 0, 0, 0.2) 20%, RGBA (0, 0, 0, 0)); Background image: -Mo-linear-shield (top, RGBA (0, 0, 0, 0.35), RGBA (0, 0, 0, 0.2) 20%, RGBA (0, 0, 0, 0)); Background image: -o-linear-gradient (top, RGBA (0, 0, 0, 0.35), RGBA (0, 0, 0, 0.2) 20%, RGBA (0, 0, 0, 0)); Background image: Linear-gradient (bottom, RGBA (0, 0, 0, 0.35), RGBA (0, 0, 0, 0.2) 20%, RGBA (0, 0, 0, 0)); -WebKit-Box-Shadow: Inset 0 1px 2px RGBA (0, 0, 0, 0.3), 0 1 Px RGBA (255, 255, 255, 0.2); Box-Shadow: Inset 0 1px 2px RGBA (0, 0, 0, 0.3), 0 1 Px RGBA (255, 255, 255, 0.2); } << Code>   
 
 
 Usage  Display: Inline-block  instead of < Code> Display Block  and each input field you want to group separately  div  's