JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="parent">
  <div class="icons">
    <i class="fa fa-plus"></i>
  </div>
</div>

CSS

.parent {
  position: relative;
  width: 15%;
  height: 100%;
  background-color: red;
  transition: width 400ms ease-in-out;
 }

.icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 60px;
}

.icons:hover {
  cursor: pointer;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

JavaScript

(function () {
	var icons = document.getElementsByClassName('icons')[0],
      toggle = false;
  icons.addEventListener('click', function(event) {
  	toggle = +!toggle;
    
    if (toggle) {
      icons.parentNode.style.width = "100%";
    } else {
      icons.parentNode.style.width = "15%";
    }
    
  });
}());