'i want to make element one under the other in css

So I want to make the form element and the button of className "new-count" one under the other but I failed to do so this is my HTML code :

<div className="register">
           <h1>Private</h1>
           <div className="login" >
               
               <form className="form" >
               <input type="email" id="email" name="email" placeholder="Enter email" />
               <input type="password" id="password" name="password" placeholder="Enter password" />
               <button type="submit" >Login</button>
              
               </form>
               <button className="new-count"> Create account</button>
           
           </div>
       </div>

the CSS code:
.login {
 display: flex;
 position: relative;
 top: 25%;
 left: 200%;
 justify-content: center;
 max-width: 10hv;
height: 300px;
padding: 10px;
 border: 1px solid black;
 justify-content: center;
}
.login.form {
 display: inline-block;
 width: 80%; 

   height: auto;
   margin: 0 auto;
   padding: 10px;
   position: relative;
   top: 0;
   left: 0;
   align-items: center;
}
.login.form input{

 position: relative;
 width: 80%;
 height: 20%;
 flex-direction: column;
 
 justify-content: center;

 flex-wrap: wrap;
 margin: .8em;
 background: #efefef;
 border: 3px solid #333;
}
button {

 width: 100%;
 padding: 10px;
 background-color: #075a23;
 color: #fff;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 1.2rem;
 cursor: pointer;
 border-radius: 3px;
}
.new-count {

 width: 100%;
 height: 15px;
 
}

so I want to make my page like the register page facebook : enter image description here ====> to this enter image description here

htmlcss


Solution 1:[1]

The code works perfectly fine on codepen. It may something from your browser/resolution.

Try this code snippet:

.login {
 display: flex;
 position: relative;
 top: 25%;
 left: 200%;
 justify-content: center;
 max-width: 10hv;
height: 300px;
padding: 10px;
 border: 1px solid black;
 justify-content: center;
}
.login.form {
 display: inline-block;
 width: 80%; 

   height: auto;
   margin: 0 auto;
   padding: 10px;
   position: relative;
   top: 0;
   left: 0;
   align-items: center;
}
.login.form input{

 position: relative;
 width: 80%;
 height: 20%;
 flex-direction: column;
 
 justify-content: center;

 flex-wrap: wrap;
 margin: .8em;
 background: #efefef;
 border: 3px solid #333;
}
button {

 width: 100%;
 padding: 10px;
 background-color: #075a23;
 color: #fff;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 1.2rem;
 cursor: pointer;
 border-radius: 3px;
}
.new-count {

 width: 100%;
 height: 15px;
 
}
<div className="register">
           <h1>Private</h1>
           <div className="login" >
               
               <form className="form" >
               <input type="email" id="email" name="email" placeholder="Enter email" />
               <input type="password" id="password" name="password" placeholder="Enter password" />
               <button type="submit" >Login</button>
              
               </form>
               <button className="new-count"> Create account</button>
           
           </div>
       </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matei Piele

Related Questions