title: How to Insert an image inside an input field in react js?
body: <p><strong>.js file</strong></p>
  <pre><code>     &lt;div className = &quot;num&quot;&gt;
      &lt;p &gt;Enter Phone Number &lt;span className='star'&gt;*&lt;/span&gt;&lt;/p&gt;
  
      &lt;input
        type=&quot;tel&quot;
        className=&quot;code&quot;
        placeholder=&quot;+91&quot;
      /&gt;
  
      &lt;img className='drop' src={drop} alt='drop' /&gt;
  
      &lt;input
        type=&quot;tel&quot;
        className=&quot;number&quot;
        placeholder=&quot;00000 00000&quot;
      /&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>.css file</strong></p>
  <pre><code>.drop{
    color: #797B86;
    margin-top: 46.5px;
    margin-left:-30px; 
  </code></pre>
  <blockquote>
  <p>without giving negative value, I'm unable to move it inside the box.Even after moving it inside the box, the space between these two boxes gets disturbed. What is the best way to do this?</p>
  </blockquote>
  <pre><code>} 
  .star{
    color: #DE1F48;
  }
  </code></pre>
  <blockquote>
  <p>Is it possible without giving negative values in stylesheet?</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/S3G4M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S3G4M.png" alt="this is how its supposed to look" /></a></p>