position in reactjs with css - css

Question

everyone, I am working on Reactjs project, I want to add submit button inside the input field, but I am not able to add, can anyone help me to place submit button inside input field, thanks in advance, my demo code, expected and actual outcome is attached
Reactjs code
<div className={styles.subscribeInputContainer}>
{I18n.getComponent(
(formattedValue) =>
<input
id="subscribeInput"
required={true}
value={this.state.value}
className={styles.subscribeInput}
placeholder={formattedValue}
onKeyPress={(e) => this.onKeyPress(e)}
onChange={(e) => this.onEmailChange(e.target.value)}
/>,
'footer.your-email-address',
{},
'Enter Your email address'
)}
<p className={styles.subscribeButton} id="btnId">
<Button variant="primary" className={styles.subscribeIcon} onClick={() => this.onSubscribe()}>Button</Button>
</p>
</div>
CSS code
.inputContainer {
position: relative;
}
.subscribeIcon {
position: absolute;
right: 10px;
}
.subscribeInputContainer {
display: flex;
flex-flow: row;
flex: 1;
font-size: $fontSize-lg;
color: $color-body;
}
Actual outcome
Expected Outcome

Answer 1

First, don't use a p as a wrapper, use a div
When you use position: absolute you take that element out of flow, and as such its parent will not take it into account when sizing itself.
If you remove position: absolute from the .subscribeIcon and add margin-left: auto to the .subscribeButton, your button should be properly right aligned within its parent, the .subscribeInputContainer.
.subscribeInputContainer {
display: flex;
flex-flow: row;
flex: 1;
border: 1px solid gray;
padding: 5px;
}
.subscribeButton {
margin-left: auto;
}
.subscribeIcon {}
<div class='subscribeInputContainer'>
<input id="subscribeInput" required={true} value={this.state.value} className={styles.subscribeInput} placeholder={formattedValue} onKeyPress={(e) />
<div class='subscribeButton' id="btnId">
<Button variant="primary" class='subscribeIcon' onClick={()=> this.onSubscribe()}>Button</Button>
</div>
</div>