<div class="flex">
<div class="block">1</div>
<div class="block">
<div class="flex column">
<div class="block">2</div>
<div class="block">3</div>
</div>
</div>
</div><style>
.flex {
display: flex;
}
.column {
flex-direction: column;
}
/* для демо */
.block {
min-width: 100px;
min-height: 100px;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
}
</style>body {
background-image: url(https://habrastorage.org/webt/5d/7b/3f/5d7b3f253c38b270567133.jpeg);
background-size: cover;
}<div class="dashed-line"></div>.dashed-line {
animation: height 4s cubic-bezier(1.0,2.0,0,1.0) 1000ms forwards;
}
@keyframes height {
0% {
height: 0px;
}
100% {
height: 215px;
}
}<div id="app">
<div :class="{ active }"></div>
<button @click="active = !active">Toggle Active</button>
</div>new Vue({
el: '#app',
data() {
return {
active: false,
}
}
})