Proportional shift of blocks to the sides when increasing one of the blocks in pure css and js

There are 3 blocks with images, the task is that when you click on the blocks, they increase from the center to the full width of the screen. Question: How to make it so that when a block is enlarged, adjacent blocks are proportionally shifted to the sides, while when the block ceases to fit, it leaves the screen in the right direction? Example: when you click on the central block, the left one is shifted to the left (and when it ceases to fit it goes beyond the screen, like the left one now!), The right one - to the right, the top one - up, the central one evenly increases from the center to the entire screen pushing out all other blocks?

  function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header2').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}
document.querySelector('#header4').addEventListener('click', classToggle);
function classToggle() {
    this.classList.toggle('header__100');
}

.container {
  white-space: nowrap;
}

#header {
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
  width: 20%;
}

#header2 {
  line-height: 20px;
  text-align: center;
  background: black;
  color: white;
    width: 20%;

}

#header3 {
  line-height: 20px;
  text-align: center;
  background: red;
  color: white;
  width: 20%;

}

#header4 {
  line-height: 20px;
  text-align: center;
  background: red;
  color: white;
  width: 20%;

}

.header {
  height: 20px;
  transition: width 10s, height 10s;
  transform: translate(-50%. -50%);
    display: inline-block;

}

.header__20 {
  height: 20px;

}

.header__100 {
  height: 100vh;
  width: 100vw!important;
}

img {
  width: 100%;
  
}

 <div class="container">
<div id="header3" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header2" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div><br>
<div id="header4" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>

</div>