Bloc qui pousse un autre bloc

Bonjour,
Je cherche a créer une fonction en javascript (ou autre si possible) pour en même temps décaler un div vers la droite (.bloc2) et faire apparaître un autre div de la droite (bloc21), au clic sur un lien. Sans pour autant utiliser la scroll-bar.
Je voudrais aussi si c'est possible avoir le même effet mais affichant trois différent bloc comme le 21 en fonction du bouton sur lequel on a cliquer, et pouvoir fermer ces blocs en cliquant sur une flèche ou une croix.

<div id="about" class="bloc2">
  <h2 "></h2>
      <p ></p>          
           <div class="bouton">
             <p >
               <a>+ d'info</a>
             </p>

<div class="bloc21" >
<h2 ></h2>
<p></p>

</div>

.bloc2
{
  height: auto;
  position: absolute;
  width: 100%;
  background-color: white;
  margin: 0px;
  padding: 0;
  max-height: 100vh;
  height: auto;
  justify-content: space-around;
  padding-right: 100px;
.bloc21
width: 80%;
height : 100%;
}

Merci.