title: Alignment issues in Input Group React
body: <p>I have increment &amp; decrement buttons with text input. when I view the localhost, it shows perfectly aligned. but when it's built and deployed, the alignment is gone.
  1st image is the LocalHost view of the element.2nd is the Deployed version's view.</p>
  <p><a href="https://i.stack.imgur.com/Bx7Co.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bx7Co.png" alt="LocalHost" /></a></p>
  <p><a href="https://i.stack.imgur.com/ZAKWV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZAKWV.png" alt="deployed version" /></a></p>
  <p>Following is the code:</p>
  <pre><code>&lt;div className=&quot;col-auto&quot;&gt;
      &lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
      &lt;button class=&quot;min-btn&quot; type=&quot;button&quot; 
          onClick={() =&gt;this.handleDecrement(element.availableCount,element.seatTypeId)}&gt;-&lt;/button&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; style={{width:'50px',textAlign:'center'}}  
      onChange={this.handleChange} id={element.seatTypeId} placeholder='0' disabled/&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
      &lt;button class=&quot;plus-btn&quot; type=&quot;button&quot; 
          onClick={() =&gt;this.handleIncrement(element.availableCount,element.seatTypeId)}&gt;+&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>