Is it possible to animate flex when adding content?

Question

css

There is an initial search page:

<main class="App">
  <div class="container">
    <header class="AppHeader_App_header__3NGN2"></header>
  </div>
</main>

A div is added after the search:

<main class="App">
  <div class="container">
    <header class="AppHeader_App_header__3NGN2"></header>
    <div class="ContentFound_content__I_WkD"></div>
  </div>
</main>

App CSS code:

.App {
  position: relative;
  background: url("./img/bg.svg") no-repeat fixed;
  background-size: cover;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3vh 10vw;
}

Is it possible to set a smooth animation for app or container so that it works with such changes?

Answer 1

First you move everything that should move, then you insert a new element and animate its appearance, then you clean up the garbage from the styles.

Answer 2

As an example:

If it doesn't fit, search the sandbox -
Link