How to make a fixation element on the page at a time (not fixed)?

Good day!
Make a list. which when clicked adds a new element. The whole page is modules, stretched at least 100vh. There are several modules. In one of them (always the last) to do list, when you click on the page there is a new item.

The complexity here lies in the fact that old items should "move" up and the bottom will appear from under the last of the old. All this should be in the center of the screen while the animation is running.

Sketched the framework of how this should work: https://jsfiddle.net/1sqcpLug/3/

Already broke all head, need help from the community!
August 19th 19 at 23:23
0 answer

Find more questions by tags CSSHTMLJavaScript