title: ReactJS: How to overlay a component on top of another component's element?
body: <p>I am just starting react. 
  I have a component which has an input field and a button. 
  There is another component which returns JSX (A blinking dot). I am importing the blinking dot component in main component and want to overlay the blinking dot on top of the input field when it is empty.</p>
  
  <p>How can I achieve this? Please help me in this. </p>
  
  <p>The code for this can be found in:
  <a href="https://stackblitz.com/edit/react-xmssdv" rel="noreferrer">https://stackblitz.com/edit/react-xmssdv</a></p>
  
  <pre><code>function App() {
    const [name, setName] = React.useState("");
    const inputChangeHandler = event =&gt; {
      setName(event.target.value);
      console.log(name);
    }
  
    return (
      &lt;div&gt;
          &lt;input type="text" value={name} onChange={inputChangeHandler} /&gt;
        &lt;div className="button"&gt;
          &lt;button type="button"&gt;Click Me!&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;Dot /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>