<div class="left">
  <div class="one">
</div>
<a href="#" class="btn">button</a>
</div>
.one {
  width:50px;
  height:30px;
  background-color:#000;
  visibility:hidden;
   transition:all 4s;
  margin-left: auto;
}
.two {
   width:500px;
  height:300px;
  background-color:#000;
  visibility:visible;
  transition:all 4s;
  margin-left: auto;

}
.left {
  width: 500px;
}
      "use strict";
      let btn = document.querySelector('.btn');
      let cont = document.querySelector('.one');
      btn.addEventListener('click', function() {
        cont.classList.toggle('one');
        cont.classList.toggle('two');
      });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.