Make div follow slide transition in vue - vue.js

Question

When using transitions and v-if, it seems that the div is created and then animation happens within that div. Is it possible to make div follow the text during the animation?
Example provided, when clicking on the button, the button jumps to side and then text slides into meet it. What I'm aiming for is the button to slide with text when button is clicked.
Example: https://codepen.io/tadhglydon/pen/WNyVQZa
<div id="app">
<div class="container"><div class="filler"></div>
<button v-on:click="SlideIn">Test</button>
<transition name="slide">
<div v-if="toggle">Status update</div>
</transition>
</div>
</div>
.container {
width: 200px;
height: auto;
display: flex;
}
.filler{
flex-grow: 1;
}
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave {
transform: translate(-100%, 0);
}
var app = new Vue({
el: "#app",
data: {
toggle: false
},
methods: {
SlideIn: function () {
this.toggle = !this.toggle;
}
}
});

Answer 1

Fixed this by using CSS and letting Vue controlling the transitions.
In the HTML I have
<div class="slider" :class="toggle ? 'slided' : ''">
And then in the CSS I have:
.slider {
width: 0px;
overflow: hidden;
transition: width 900ms ease;
-moz-transition: width 900ms ease;
-ms-transition: width 900ms ease;
-o-transition: width 900ms ease;
-webkit-transition: width 900ms ease;
}
.slided {
width: 100px;
}