title: Input search box transition (width) is not smooth
body: <p>I am trying to expand the input search box on focus and compress it to its original state on loosing focus from search box. I am able to achieve the same using css transition. But some times i see the transition not happening smoothly as shown in examples. Is there any best way to achieve the same? or any suggestions to my code to achieve smoothness.</p>
  
  <p>While expanding it is causing the sibling components also re-render because it is expanding its with.</p>
  
  <p>React Code: </p>
  
  <pre><code> &lt;div className="header" style={{ width: "420px"}} ref={(searchHeader) =&gt; { this._searchHeader = searchHeader }}&gt;
        &lt;label className="label"&gt;{"Search here"}&lt;/label&gt;
        &lt;div className="SearchBox"&gt;
             &lt;input className="input" spellCheck={false} onFocus={this.onFocus} onBlur={this.onBlur} /&gt;
             &lt;div className="search-icon"&gt;
                  &lt;span className="Search-icon" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  
  
  
  
  private onFocus = (): void =&gt; {
          if (this._searchHeader) {
              this._searchHeader.style.width = "1000px";
          }
      }
  
      private onBlur = (): void =&gt; {
          if (this._searchHeader) {
              this._searchHeader.style.width = "420px";
          }
      }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.label{
          width: 110px;
          padding-top: 6px;
          padding-left: 10px;
          padding-right: 10px;
          white-space: nowrap;
          background: rgba(255, 255, 255, 0.5);
  }
  
  .header {
          display: flex;
          align-items: stretch;
          flex-shrink: 0;
          -webkit-transition: width 2s linear; /* Safari*/
          transition: width 2s linear;
  }
  
  .input{
          align-self: stretch;
          min-width: 200px;
          padding: 0 6px;
  }
  </code></pre>