Move div according to other div's height - html

Question

I have two divs and I want to move both of them at the same time: one to left and other to up.
I did that using the transfom CSS property and I set the translateX and translateY in pixels.
How can I do the same effect when I don't know the height of first div? It's addaptive according to its content.
My real project uses Angular and I want to avoid using pure JQuery (a pure CSS solution will be great!).
EDIT:
I use the class above to animate my second div:
.to-up {
transition-delay: .2s;
transform: translateY(-127px);
}
I came to that value of 127px through this calculation:
div1 height + div1 margin-bottom + div1 borders.
In my real case, the div1 height is addaptive to its content so I don't know how to animate div2 to the top of its parent. How can I do that?
Here's my HTML:
<div class="container">
<div id="item1" class="item">Test1</div>
<div id="item2" class="item">Test2</div>
</div>
My CSS:
.container {
width: 100%;
}
#item1 {
height: 120px;
}
#item2 {
height: 80px;
}
.item {
width: 100px;
border: 1px solid black;
margin: 5px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.to-right {
transform: translateX(-107%);
}
.to-up {
transition-delay: .2s;
transform: translateY(-127px);
}
And JQuery:
$('.item').on('click', function() {
$('#item1').toggleClass('to-right');
$('#item2').toggleClass('to-up');
});
Finally there's the code working with pixels on Jsfiddle.
Thanks a lot!

Answer 1

This is the better solution that you can do, with Angular in template (don't forget the "goOn" variable initialization in the component):
<div class="container">
<div id="item1" class="item" [class.to-right]="goOn" (click)="goOn = !goOn">Test1</div>
<div id="item2" class="item" [class.to-up]="goOn" (click)="goOn = !goOn">Test2</div>
</div>
Here a working example: https://stackblitz.com/edit/angular-animation-on-click?file=src/app/app.component.html
I think you can't do it without angular (or js) because we're talking about "click" event.
I'm not understanding about what do you want to do without knowing the box heights. Where do you want to move them? I think that without knowing its solution you can't do it.

Answer 2

Problem fixed.
Instead using translateY property to move the second div I used animation with animation-timing-function as linear and animation-fill-mode as forwards.
What did I changed?
Container element now has relative position.
An animation called top was created (set top to 0 on 100%).
The class .move-up changes element position to absolute and call the top animation.
I set .move-up class to the second div on click.
Here's a working poc on Jsfiddle.
HTML:
<div class="container">
<div id="item1" class="item">Test1</div>
<div id="item2" class="item">Test2</div>
</div>
JQuery:
$('.item').on('click', function() {
$('#item1').toggleClass('to-right');
$('#item2').toggleClass('to-top');
});
CSS:
.container {
width: 100%;
position: relative;
}
#item1 {
height: 120px;
}
#item2 {
height: 80px;
margin-top: 0px;
}
.item {
width: 100px;
border: 1px solid black;
margin: 5px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.to-right {
transform: translateX(-107%);
}
.to-top {
position: absolute;
animation-name: top;
animation-duration: .3s;
animation-delay: .2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes top {
0% {
top: 100%;
}
100% {
top: 0;
}
}