在反应中将文本与输入字段对齐

Question

Im not quite sure on how I can place the paragraph 2 at the bottom of the div right next to the input field. I employed some css from a post from here but it does not work (at least in my case)

        <div className = 'group'>
            <label>Password</label>
            <input 
            name = "password"
            type = "password" 
            value = {this.state.password} 
            onChange = {this.handleChange} 
            />
            <p>{this.state.passwordError}</p>
            <p className = 'group' >{this.state.passwordError2}</p>
        </div><br></br>

CSS

 .group {
  display: flex;
  margin-bottom: 10px;
  }
  
.infotext {
 display: inline-block;
  }

Here is a picture of what it looks like right now and below it is what I hoped it would look like after applying the css

Answer 1

Here I have used tags instead of classes, just replace them with your classnames

 div { position: absolute } p { display: inline-block; }

 <div className='group'> <label>Password</label> <input name="password" type="password" value={ this.state.password} onChange={ this.handleChange} /> <p>{this.state.passwordError}</p> <p className='group'>{this.state.passwordError2}</p> </div><br></br>