【css】並列コンポーネントを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%;}