title: hidden element is not positioned correctly
body: <p>I am stuck for 1 day on the display of a hidden table in Angular.</p>
  <p>So, I have a table with several elements</p>
  <p><a href="https://i.stack.imgur.com/0vhHz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0vhHz.png" alt="enter image description here" /></a></p>
  <p>When, the user clicks on the button <code>1</code>, the second table is at the bottom.</p>
  <p><a href="https://i.stack.imgur.com/QN0T2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QN0T2.png" alt="enter image description here" /></a></p>
  <p>It must be between the button 1 and the button 2.</p>
  <p>Another example:</p>
  <p>When, the user clicks on the button <code>2</code>, the second table must be between the button 2 and the button 3.</p>
  <p><a href="https://i.stack.imgur.com/jTghA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jTghA.png" alt="enter image description here" /></a></p>
  <p>I really don't know how to solve this problem -&gt; <a href="https://stackblitz.com/edit/angular-ivy-zdrf9n?file=src/app/app.component.html" rel="nofollow noreferrer">Stackblitz</a>.</p>
  <p>I'm not sure the problem is in Angular? Maybe in HTML?</p>