How to make conditional margin for hideable flex panels?

I have initial html:

body {  background-color: grey;}.container{  display: flex;  width: 200px;  height: 100px;  background-color: red;}.panel{  height: 100%;  flex-grow: 1;  flex-basis: 50%;  color: white;}.left{  background-color: green;}.left{  margin-right: 8px;}.right{  background-color: blue;}.hidden{  display: none;}

<div class="container"><div class="left panel ">left</div><div class="right panel ">right</div></div>

It makes two panels of equal width with 8px margin between them. Fiddle

Looks:

Then I need to hide right or left or both panels with hidden class.

I have new html (fiddle):

<div class="container"><div class="left panel ">left</div><div class="right panel hidden">right</div></div>

Result:

How to remove margin if there is one panel and show margin if there are two panels?I can't just move margin from left to right panel because I need possibility to hide both panels independently.

UPD 1. I can't remove panels from dom. It should use hidden class.