JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flex-container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

CSS

#flex-container {
  display: flex;
  padding: 20px;
  border: 2px solid;
  position: relative;
}

.box {
  width: 200px;
  height: 200px;
}

.box1 {
  background-color: aqua;
  z-index: 1;
  left: 200px; /* will do nothing*/
}

.box2 {
  background-color: gray;
  border: 2px dashed black;
  margin-left: -25px;
}

.box.box1:before {
  content: "relative to flex container and not flex item";
  position: absolute;
  top: 0;
  left: 0;
}