JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="block side-left"></div>
  <div class="block"></div>
  <div class="block side-right"></div>
</div>
<div class="row"></div>

CSS

.row {
  border: 2px solid;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.block {
  border: 2px solid;
  height: 200px;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}

.side-left {
  width: 29%;
  position: absolute;
  background: black;
  left: -20%;
}

.side-left:hover {
  left: 0;
}

.side-right {
  width: 29%;
  position: absolute;
  background: black;
  right: -20%;
}

.side-right:hover {
  right: 0;
}