JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<h5>Initial state (no element displacement)</h5>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<h5>Using <strong>translate</strong> will not affect the surrounding elements</h5>
<div class="parent">
  <div class="child child--translate"></div>
  <div class="child"></div>
</div>

<h5>Using <strong>margin</strong> will affects other elements because it keeps the displaced element on the flow</h5>
<div class="parent">
  <div class="child child--margin"></div>
  <div class="child"></div>
</div>

CSS

body {
  font-family: "Helvetica Neue";
  margin: 5px 60px;
}

h5 {
  margin-bottom: .1em;
  font-weight: normal;
}

.child {
  display: inline-block;
  background: red;
  height: 44px;
  width: 200px;
}

.child--margin {
  margin-left: -50px;
}

.child--translate {
  transform: translateX(-50px);
}