I have this HTML (technically JSX) code snippet here:
The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen.
This arrangement ensures that both the domain-label and icon-container elements will have equal widths.
How can I achieve this such that it works for screens of any width (>400px)?
Below is the complete HTML structure:
<div className="domain-container">
<div className="domain-label">
<p>Domain</p>
</div>
<div className="domain-input-parent">
<input className="domain-input" id="website-url" placeholder=" https://www.yourwebsite.com" onInput={validateDomain} onClick={validateDomain}></input>
<p id="error-text" className={ (hideErrorText == true) ? "hidden invalid-input" : "invalid-input"}>Please enter a valid domain ex. www.example.com</p>
</div>
<div className="icon-container">
<img className="info-icon" src="images/info_icon.png"></img>
<span className="tooltip-text">This is the top level website for seo radar to monitor. We will validate the domain and will fetch the robots.txt file associated with it. Examples: www.example.com or example.com.</span>
</div>
</div>
Please let me know if you need more information.