title: React styled component animation not working
body: <p>I am trying to create an animation for form textfield and label.
  I want to be able to change the position of LabelText to top of the TextBox component.
  Please let me know what I am missing on, My entered text and label are overlapping i.e. label is not animated.
  Request help!</p>
  <p>Styled components:</p>
  <pre><code>export const TextBox = styled.input`
    display: flex;
    width: 100%;
    height: 2em;
    border-radius: 5px;
    border: none;
    background: ${styles.backgroundGradient};
  `;
  
  export const LabelText = styled.label`
    position: absolute;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 16px;
    pointer-events: none;
    transition: 0.5s;
    color: ${styles.formContentColor};
    ${TextBox}:focus ~ &amp;,
    ${TextBox}:not([value=&quot;&quot;]) ~ &amp; {
      top: -1.5em;
      left: 0;
      color: ${styles.formContentColor};
      font-size: 20px;
    }
  `;
  
  export const InputWrapper = styled.div`
    position: relative;
    width: 60%;
  `;
  
  
  </code></pre>
  <p>Order of placement in components</p>
  <pre><code>        &lt;InputWrapper&gt;
            &lt;LabelText&gt;Product Name&lt;/LabelText&gt;
            &lt;TextBox type=&quot;text&quot; /&gt;
          &lt;/InputWrapper&gt;
  </code></pre>