JSFiddle - React, Tailwind, and code Playground

HTML

<div id='gespeicherteMails'>
<p id='MailUeber'>gespeicherte Mailadressen:</p>
<div id='MailErgebnisse'>hier ein Inhalt</div>
</div>
<div id='Optionen'>
<div id='OptiErgebnisse'>hier ein Inhalt</div>
<p id='OptionenUeber'>Optionen:</p>
</div>

CSS

/*Den beiden div's in den Flügeln eine Breite geben*/
#OptiErgebnisse, #MailErgebnisse {
   width: 100%;
   color: #000;
}

#gespeicherteMails{
   display: flex;                   /* damit die Inhaltselemente sich automatisch richtig anordenen */
   width: 19.5em;
   height: 20em;
   margin-right: -18em;
   position: fixed;
   background-color: red;
   right: 0;
/*   top: 15.5em;*/
   top: calc(50vh - 10em);          /* damit der Flügel immer vertikal zentriert (rechts mittig) angezeigt wird */
   border-radius: 15px 0 0 15px;
   transition: all 1s ease-in-out;
}

#gespeicherteMails:hover {
   margin-right: 0em;
}

#gespeicherteMails #MailUeber{
   background-color:lightblue;
   text-align:center;
   margin:0;
   border-radius: 15px 0 0 15px;
   height: 100%;
   width: 1.6em;
   writing-mode: vertical-rl;
}
#Optionen{
   display: flex;                   /* damit die Inhaltselemente sich automatisch richtig anordenen */
   width: 19.5em;
   height: 20em;
   margin-left: -18em;
   position: fixed;
   background-color: red;
   left: 0;
/*   top: 15.5em;*/
   top: calc(50vh - 10em);          /* damit der Flügel immer vertikal zentriert (links mittig) angezeigt wird */
   border-radius: 0px 15px 15px 0;
   transition: all 1s ease-in-out;
}
#Optionen:hover {
   margin-left: 0em;
}

#Optionen #OptionenUeber{
   background-color: lightblue;
   text-align: center;
   margin: 0;
   border-radius: 0 15px 15px 0;
   height: 100%;
   width: 1.6em;
   writing-mode: vertical-rl;
}