<div id="wrapper" class="lined">
  <div id="content" class="lined misaligned">
    &nbsp;
  </div>
</div>
* {
  box-sizing: border-box;
}

#wrapper {
  position: relative;
  margin: 20px auto;
  width: 100px;
  height: 100px;
  background-color: #2980b9;
}

#content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(25%);
  width: 100%;
  background-color: #8e44ad;
  transition-delay: 0s;
  transition-duration: 600ms;
  transition-property: transform;
  transition-timing-function: ease-in-out;
}
#content.misaligned {
  transform: translateX(25%);
}

.lined {
  border-top: 2px solid #2c3e50;
  border-bottom: 2px solid #2c3e50;
}
.lined::before {
  content: " ";
  height: 2px;
  background-color: #2c3e50;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

#wrapper.lined::before {
  background-color: #f1c40f;
}
#content.lined::before {
  background-color: #d35400;
}
setInterval(function() {
  const content=document.getElementById('content');
  if (!content.classList.contains('misaligned')) {
    content.classList.add('misaligned');
  } else {
    content.classList.remove('misaligned');
  }
}, 1500);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.