JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="wrapper outside-wrapper">
    <svg class="outside">
      <rect width="300" height="100" fill="blue" />
    </svg>
  </div>
  <div class="wrapper inside-wrapper">
    <svg class="inside">
      <rect width="100" height="100" fill="red" />
    </svg>
  </div>
</div>

CSS

.wrapper {
  margin: 20px;
  position: absolute;
}

.inside-wrapper {
  margin-left: 50px;
}

.inside {
  /* stroke: #333; */
  /* stroke-width: 10px; */
}

.outside {
  stroke: #333;
  stroke-width: 10px;
}