title: How to get the chips inside the input box?
body: <p>I have added this input box in ReactJS that created chips, but I am unable to get the chips inside the input box.</p>
  
  <p><a href="https://i.stack.imgur.com/KPsJJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KPsJJ.png" alt="enter image description here"></a></p>
  
  <p>If I keep on adding more chips, the input box just keeps going down.</p>
  
  <p>I want to keep my input box position and size fixed, and these chips inside the box. What approach should I use?</p>
  
  <p>Below is my React jsx code:</p>
  
  <pre><code>&lt;div className="chips" onClick={this.focusInput}&gt;
      {chips}
      &lt;input
          type="text"
          className="form-input chips-input"
          placeholder={placeholder}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.clearInvalidChars}
      /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: I tried the first solution like this:</p>
  
  <pre><code>&lt;div className="form-input chips" onClick={this.focusInput}&gt;
      {chips}
      &lt;input
          type="text"
          className="chips-input"
          placeholder={placeholder}
          onKeyDown={this.onKeyDown}
          onKeyUp={this.clearInvalidChars}
      /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/K4Gm7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K4Gm7.png" alt="enter image description here"></a></p>
  
  <p>I am quite noob in CSS, can anyone tell me what can I do so that the items do not pop out of the box.</p>