JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="image">
              <article id="a"></article>
              <article id="b"></article>
              <article id="c"></article>
              <article id="d"></article>
              <article id="e"></article>
   </div>
   
  <body>
  <button id="but">Нажать</button>

CSS

#a{
  width: 20%;
  height: 100px;
  margin-left: 0%;
  background-color: red;
}
#b{
  width: 20%;
  height: 100px;
  margin-left: 20%;
  background-color: red;
}
#c{
  width: 20%;
  height: 100px;
  margin-left: 40%;
  background-color: red;
}
#d{
  width: 20%;
  height: 100px;
  margin-left: 60%;
  height: 100px;
  background-color: red;
}
#e{
  width: 20%;
  height: 100px;
  margin-left: 80%; 
  background-color: red;
}

.image{
  width: 1000px;
}

JavaScript

var contr = document.getElementsByTagName("article");
  var but = document.getElementById("but");
  but.onclick= function(){
    for(var i = 0; i < contr.length; i++){
    contr[i].style.marginLeft = +contr[i].style.marginLeft + 20 + "%";
    }
  }