How could I align labels to two fields in a form-CodePudding

I'm trying to write a signup form ui with html/css (actually using React).

I could not make the form below the title and keep the 'Your email' and 'Your password' aligning with the start of the input tag which shows like this:

And what I want is to make it look like this:

How could I make this?

.login-form {
  width: 60%;
  margin: 250px auto;
  padding: 25px;
  border: 3px solid darkcyan;
}

.login-form h2 {
  text-align: center;
}

.login-form .form {
  text-align: center;
}

.form-group p {
  margin-bottom: 5px;
}

.form-group input {
  width: 30%;
  height: 30px;
}

.form-group .button {
  width: 10%;
  height: 30px;
  margin-top: 15px;
}

<div className="container">
  <div className="login-form">
    <h2>Login here</h2>
    <form className='form'>
      <div className="form-group">
        <p>Your email</p>
        <input type='text' name='email' id='email' placeholder='Email' />
      </div>
      <div className="form-group">
        <p>Your password</p>
        <input type='password' name='password' id='password' placeholder='Password' />
      </div>
      <div className="form-group">
        <input type='submit' name='login' id='login' value='Login' className="button" />
      </div>
    </form>
  </div>
</div>

CodePudding user response：

Here, just don't forget to change the class attributes to className, since you are using react.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.login-form {
  width: 60%;
  text-align:center;
  margin: 250px auto;
  padding: 25px;
  border: 3px solid darkcyan;
}

.login-form h2 {
  text-align: center;
}

.login-form .form {
  text-align: center;
}

.form-group{
  width: 30%;
  margin:0 auto;
  text-align:left
}
.form-group p {
  margin-bottom: 5px;
}

.form-group input {
  height: 30px;
  width: 100%;
}

.form-group.right{
text-align:right
}
.form-group .button {
  width: initial;
  height: 30px;
  margin-top: 15px;
}

<div >
  <div >
    <h2>Login here</h2>
    <form class='form'>
      <div >
        <p>Your email</p>
        <input type='text' name='email' id='email' placeholder='Email' />
      </div>
      <div >
        <p>Your password</p>
        <input type='password' name='password' id='password' placeholder='Password' />
      </div>
      <div >
        <input type='submit' name='login' id='login' value='Login'  />
      </div>
    </form>
  </div>
</div>

I highly recommend you to use <label> instead of <p> and linking them to your inputs with for attribute.