Afficher deux barres scrolls sur page divisée en deux

Hello !
C'est hyper bête mais pas moyen de trouver une solution. J'ai une page divisé en deux partie et je voudrais avoir un scroll qui apparait pour chacun d'en elle.

j'ai fait un codepen mais c'est pas le comportement de scroll normal qu'aurait le scroll sur un navigateur (et le webkit n'apparait pas non plus), mais quand même : https://codepen.io/lucie-lucie/pen/BarVExZ

Any idea ?? Merci !!

html, body {height: 100%; overflow-y: scroll; }
.partiegauche{padding:20px; height: 100%; background-color: white; }
.partiedroite{position: fixed; top: 0; left:50%; width:50%; height:100%; overflow:auto; padding:20px; background-color:#EAECEE;}
.marges {margin-top:20px; margin-right:40px; margin-left:20px; }
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-thumb {border-radius: 10px;background:grey;-webkit-box-shadow: inset 0 0 6px white;}

<!-- MENU PARTIE GAUCHE --><div class="partiegauche">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br></div>

<!-- CONTENT PARTIE DROITE --><div class="partiedroite"><div class="marges">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div></div><!-- CONTENT PARTIE DROITE -->

J'ai tout essayé, le seul moyen de la faire apparaitre c'est de faire

direction: rtl;

Mais ça m'arrange pas du tout, ça inverse tout mes paragraphes (et la scrollbar s'affiche du coté inversé du coup).

C'est incompréhensible, ça veut bien dire qu'il peut y en avoir une mais aucun moyen de l'afficher autrement (webkit ; overflow-y ; scrollbar et j'en passe)