title: ReactJS - How to float placeholder at top on clicking on Input Text Box?
body: <p>I am trying to float my placeholder at top.
  1. On clicking on the text box, placeholder should be at the top
  2. While the value in the text box is present, placeholder should be at the top.</p>
  
  <p>Below is my JS Code:</p>
  
  <pre><code>  &lt;div class="textBoxContainer input-container"&gt;
  
      &lt;input class='textContainer' 
      type={type} placeholder={placeholder} onChange={handleChange} 
      className={textContainerClassDisabled.join(' ')} disabled={props.textContainerDisabled}/&gt;
  
      &lt;span className={boxClass.join(' ')} onClick={showHide}&gt;
        {type === 'input' ? 'Hide' : 'Show'}
      &lt;/span&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Below is my CSS code used:</p>
  
  <pre><code>.textBoxContainer{
     background: rgb(255, 255, 255);
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.32);
     height: 56px;
     width: $textBoxElementWidth;
   }
  
  .textContainer{
      width: $textBoxElementWidth - 136px;
      height: $textBoxSpace*2;
      color: $textBoxFontColor;
      font-size: 14px;
      font-family: HelveticaNeue;
      letter-spacing: 0px;
      line-height: $textBoxLineHeight;
      //box-shadow: ;
      &amp;-disabled{
         top:0px !important;
         //left:0px !important;
          width:100%;
         height:100%;
     }
    }
  
  .input-container{
     position: relative;
    span{
    position: absolute;
    right: $textBoxSpace;
    top: $textBoxSpace;
    cursor: pointer;
    width: 45px;
  }
  
  input{
      position: absolute;
      top: $textBoxSpace;
      padding-left: $textBoxSpace;
      border:none;
      outline:none;
  }
  }
  </code></pre>