Width CSS animation

HTML

<div class="panel-red panel-red-collapsed">
Lorem ipsum dolor.
</div>

<div class="panel-green panel-green-collapsed">
<div class="panel-green-child">
Lorem ipsum dolor.
</div>
</div>



<div class="panel-blue panel-blue-collapsed">
<div class="panel-blue-child">
Lorem ipsum dolor.
</div>
</div>

CSS

.panel-red {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: #ea564b;
  overflow: hidden;
  width: auto;
  height: 50px;
  padding-left: 50px;
  line-height: 50px;
  transition: width 1s ease-in-out;
  cursor: pointer;
}

.panel-red-collapsed {
  width: 0;
 }
 
.panel-green {
  position: absolute;
  bottom: 100px;
  right: 30px;
  background: #4aca4f;
  overflow: hidden;
  width: auto;
  height: 50px;
  padding-left: 50px;
  line-height: 50px;
  cursor: poiner;
}

.panel-green-child {
  width: 100%;
  transition: width 1s ease-in-out;
  background: #fff79e;
  overflow: hidden;
  white-space: nowrap;
}

.panel-green-collapsed .panel-green-child {
  width: 0;
}

.panel-blue {
  position: absolute;
  bottom: 170px;
  right: 30px;
  background: #4cc0ea;
  overflow: hidden;
  width: auto;
  height: 50px;
  padding-left: 50px;
  line-height: 50px;
  cursor: poiner;
}

.panel-blue-child {
  width: 300px;
  transition: width 1s ease-in-out;
  background: #fff79e;
  overflow: hidden;
  white-space: nowrap;
}

.panel-blue-collapsed .panel-blue-child {
  width: 0;
}

TypeScript

$(".panel-red").bind("click", () => {$(this).toggleClass("panel-red-collapsed")});
$(".panel-green").bind("click", () => {$(this).toggleClass("panel-green-collapsed")});
$(".panel-blue").bind("click", () => {$(this).toggleClass("panel-blue-collapsed")});