title: Displaying Span as Textarea with CSS
body: <p>I have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em;
    max-width: 350px;
    width: calc(100% - 2em);
    vertical-align: middle;
  }
  .input:focus{
        outline-offset: -2px;
    
  }
  .input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none;
    /* for box shadows to show on iOS */
  }
  
  .input__field:focus {
    outline: none;
  }
  
  .input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #6a7989;
    font-weight: bold;
    font-size: 70.25%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
  }
  
  .span-texatarea {
      overflow: auto;
      height: 8rem;
      resize: vertical;
      vertical-align: top !important;
      text-transform: none;
      color: inherit;
      font: inherit;
      border: none;
      outline: 0;
      margin: 0;
      -webkit-appearance: textarea;
      appearance:textarea;
      flex-direction: column !important;
      white-space: pre-wrap !important;
      word-wrap: break-word;
      display: inline-block;
      text-align: start;
      -webkit-writing-mode: horizontal-tb;
  }
  
  
  
  
  /* Kaede */
  
  .input--kaede {
    display: block;
    overflow: hidden;
    margin: 1em auto 2em;
    background: #EFEEEE;
  }
  
  .input__field--kaede {
    position: absolute;
    top: 0;
    right: 100%;
    width: 60%;
    height: 100%;
    background: #fff;
    color: #9DABBA;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  }
  
  .input__label--kaede {
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    cursor: text;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  }
  
  .input__label-content--kaede {
    padding: 1.5em 0;
  }
  
  .input__field--kaede:focus,
  .input--filled .input__field--kaede {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition-delay: 0.06s;
    transition-delay: 0.06s;
  }
  
  .input__field--kaede:focus + .input__label--kaede,
  .input--filled .input__label--kaede {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    pointer-events: none;
  }
  
  @media screen and (max-width: 34em) {
    .input__field--kaede:focus + .input__label--kaede,
    .input--filled .input__label--kaede {
      -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
      transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
      pointer-events: none;
    }
  }
  
  *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
  .clearfix:before, .clearfix:after { content: ''; display: table; }
  .clearfix:after { clear: both; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="input input--kaede"&gt;
       &lt;input class="input__field input__field--kaede" type="text" id="input-35" /&gt;
       &lt;label class="input__label input__label--kaede" for="input-35"&gt;
        &lt;span class="input__label-content input__label-content--kaede"&gt;Full Name&lt;/span&gt;
  
  
  &lt;/label&gt;
  &lt;/span&gt;
  
  &lt;span class="input input--kaede"&gt;
       &lt;input class="input__field input__field--kaede" type="text" id="input-36" /&gt;
       &lt;label class="input__label input__label--kaede" for="input-36"&gt;
        &lt;span class="input__label-content input__label-content--kaede"&gt;E-Mail&lt;/span&gt;
  
  
  &lt;/label&gt;
  &lt;/span&gt;
  
  &lt;span class="input input--kaede"&gt;
       &lt;input class="input__field input__field--kaede" type="text" id="input-37" /&gt;
       &lt;label class="input__label input__label--kaede" for="input-37"&gt;
        &lt;span class="input__label-content input__label-content--kaede"&gt;Phone Number&lt;/span&gt;
  
  
  &lt;/label&gt;
  &lt;/span&gt;
  
  &lt;span class="input input--kaede"&gt;
       &lt;input class="input__field input__field--kaede" type="text" id="input-38" /&gt;
       &lt;label class="input__label input__label--kaede" for="input-38"&gt;
            &lt;span class="input__label-content input__label-content--kaede span-texatarea"&gt;Message 
            &lt;/span&gt;
  
  
  &lt;/label&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/css_stroller/6ag9j836/" rel="nofollow noreferrer">https://jsfiddle.net/css_stroller/6ag9j836/</a></p>
  
  <p>And I basically want that "message span element" to be displayed like a Textarea but with the transition animation on focus. To be more specific:
  As soon as Message Area is on focus the animation and style should be similar to the other spans but word typing should start at the top with word wrap on and auto break, just like a normal textarea would. I've tried adding a new class "span-textarea" and tried using</p>
  
  <pre><code> appearance:textarea; 
  </code></pre>
  
  <p>But that didn't help.</p>
  
  <p>Also the label "Message" should be on </p>
  
  <pre><code> vertical-align:middle;
  </code></pre>
  
  <p>So that it's centered within the box, but it doesn't work. I'm not quite sure if that's possible.</p>