JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-form__group b-form__group--form-comment">
  <textarea placeholder="Type message…" class="b-input b-input--new-comment"></textarea>


  <div class="b-form__group b-form__group--add-file">
    <label for="add-file" class="b-label b-label--add-file">Add files</label>
    <input type="file" id="add-file" class="b-input b-input--add-file">
  </div>
</div>

CSS

.b-form__group--form-comment {
    border: 2px solid #000;
    padding-left: 14px;
    padding-right: 10px;
    background: #fff;
    transition: all 0.25s ease;
    height: 40px;
    }
b-input--new-comment {
  display: block;
  width: 100%; 
    resize: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    height: 56px;
    padding: 15px 10px 0 0;
    text-align: left;
    border: none;
}

.b-form__group--add-file {
    padding-bottom: 12px;
    opacity: 0;
    position: absolute;
    transition: all 0.45s ease;
}
.b-label--add-file {
    width: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
}
.b-input--add-file[type=file] {
    display: none;
    opacity: 0;
    
}

.b-form__group--form-comment:hover {
  height: 60px;   
  }
.b-form__group--form-comment:hover .b-form__group--add-file {
    opacity: 1;
    display: block;
    position: static;
    }