I am currently utilizing reactJS to create a form. Within this form, I am attempting to include a text field, a button for copying the text to the clipboard, and a hyperlink that redirects to a valid website.
The issue I am facing is evident in the provided screenshot - the copy button and the hyperlink are not aligning properly. One element appears lower than the other and is overlapping with other components. Screenshot
My objective is to arrange these elements in a single row by referencing my html and CSS code as shown below: .html
<div>
<div className="link">
<InputField
disabled={this.state.disabled}
placeholder={this.props.placeholder}
title={this.props.title}
value={this.props.value}
change={e => this.props.change(e)}/>
</div>
<div className="copy-button">
<button onClick={(e) => this.copyToClipboard(e)}>C</button>
</div>
<div id="link-button">
<a className="link-button" target="_blank" rel="noopener noreferrer" href={this.props.value}>Visit</a>
</div>
</div>
.CSS
.link {
width:80%;
float:left;
height:35px;
}
.link-button {
width:5%;
float:left;
padding-left:10px;
height:35px;
}
.copy-button {
width: 5%;
float:left;
padding-left: 10px;
height:35px;
}