0

I am trying to create responsive register form. where the box will be in middle and the input will create two input something like this 

Input    Input 
Input    Input

Code:

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 350x;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}

.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

CodePen Demo

I do not know why I cant make my input side by side. Any help will really be appreciated.

Improve this question

3 Answers 3

Reset to default
2

Another simple way is to use columns by adding column-count: 2 to the container, in this case:

.login form {
  column-count: 2;
}


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 350x;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}
.login form {
  column-count: 2;
}
.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

that was very simple then I was struggling. Looks Preety good Thank you Edit: This was the simplest solution no flex box needed. Thank you so much this solved my responsive problem. Too bad I cannot give two best answer. Your answer is realy simple. I just didnt know there was such property
0

Use Flexbox and set the flex-basis of the input groups to 50%.

/* Add */

form {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
}

.login .input-group {
  flex-basis: 45%;
}


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 550px;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}

.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  flex-basis: 45%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}

form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

Improve this answer

5 Comments

how do you live the space between each box ? I tried margin 10px no effect at all
@danny Reduce the flex-basis value and use justify-content: space-between in the parent element.
now just have to figure out how to make it responsive hehe cant get to work on responside the box looks too small
It works fine just as Johanness's answer. What's the difference on the responsive side? :)
Dont know why the whole box sinks. Thats the only difference but i can manage to change it. Thank you so much for your help
0

If you are familiar with and able to use bootstrap, maybe you could plug this into your form.

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<form>
  <div class="row">
    <div class="col">
      <span>Username</span>
      <input id="userName" type="text" class="form-control" placeholder="Username" required>
    </div>
    <div class="col">
      <span >Orginization Password</span>
      <input type="password" class="form-control" placeholder="Orginization Password" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Password</span>
      <input type="password" class="form-control" placeholder="Password" required>
    </div>
    <div class="col">
      <span for="userName">Confirm Passsword</span>
      <input type="password" class="form-control" placeholder="Confirm Password" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >First Name</span>
      <input type="text" class="form-control" placeholder="First Name" required>
    </div>
    <div class="col">
      <span>Last Name</span>
      <input type="text" class="form-control" placeholder="Last Name" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Phone Number</span>
      <input type="tel" class="form-control" placeholder="XXX-XXX-XXXX" required>
    </div>
    <div class="col">
      <span>Affiliation</span>
      <input type="Text" class="form-control" placeholder="Affiliation">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Email</span>
      <input type="email" class="form-control" placeholder="Email" required>
    </div>
  </div>
</form>

Improve this answer

1 Comment

yes bootstrap will be the easiest way to implement this but dont want to go this route because all the class and every thing is already implemented and also i am trying to make a reusable code throught out the website so thought pure css would be easiest way but i can definetly give a try thank you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.