テキストフォームとボタンを並列に並べてかつ9:1の割合で表示したい場合
つまるところ、入力フォームがほとんどを占めて隅に何らかのコンポーネント(ボタンでも何でも可)
を作りたい場合は以下のように記述します。
<div className='password'>
<div className="password-reset-form">
<input type={this.state.inputType1} value={this.state.password1} onChange={(event) => { this.setState({password1: event.target.value})}} placeholder={"パスワード"}/>
</div>
<div modifier='quiet' className='password-show' onClick={this.toggleInputType1}>
{ this.state.inputType1 === 'password' ? <Icon icon={{default: 'fa-eye'}} /> : <Icon icon={{default: 'fa-eye-slash'}} /> }
</div>
</div>
#password-page .password{
display: flex;
margin: 10px; }
#password-page .password-reset-form{
width: 100%;}
クラスにpassword-reset-formと指定しています。これはテキスト入力フォームのスタイルであり、
重要なポイントの一つ。
widthの値を最大値にすることで強制的に右側のコンポーネントをすみに追いやることができます。
