position in reactjs with 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>