<div class="icon">
  <span></span>
  <span></span>
</div>
.icon {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.icon span{
 display: block;
 background-color: #000;
}
.icon span:first-child{
  width: 4px;
  height: 40px;
}
.icon span:last-child{
  position: relative;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 4px;
}
.icon.active{
  padding-left: 4px;
}
.icon.active span:first-child{
  display: none;
}
$('.icon').click(function() {
  $(this).toggleClass('active');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js