JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="transform">
     <p>
    transform
    </p>
  </div>
  <div class="left">
    <p>
    left
    </p>
  </div>
</div>

CSS

.container {
  width:400px;
  height:200px;
  background-color:#f00;
  position: relative;
}

.transform,.left {
  width:100px;
  height:50px;
  background-color: #0f0;
  margin-bottom:15px;
  color:#fff;
}

.transform {
  background-color: #0f0;
  transform: translate3d(50%,0,0)
}
.left {
  position:absolute;
  left:50%;
  background-color: #00f;
}