Make a component that appears by stretching from zero width/height like slideToggle from jquery?

Question

css

api.jquery.com/slideToggle

I want that when sending a request to the server, the input decreases a little and an icon appears on the right.
I'm trying to do this:

.scaleX-enter-active , .scaleX-leave-active {
    transition: all .4s;
  }
  .scaleX-enter, .scaleX-leave-to
  /* .slide-fade-leave-active для <2.1.8 */ {
    transform: scaleX(0);
  }

...
        <transition name="scaleX">
          <span v-if="processing" class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"/></span>
        </transition>
...

The icon appears and disappears instantly. At the same time, everything works fine with fade.
made a small example, https://jsfiddle.net/5wcrfqdb/3/ , want the scale block to appear from left to right (zero width to full width)
upd: advanced a bit : https://jsfiddle.net/5wcrfqdb/60/
ideally make it so that the scale is up to the actual width of the element

Answer 1

And if div instead of span?
<div v-if="processing">scaleX</div>