<div class="wrap">
  <style contenteditable>
.wrap {
  position: relative;
}
  </style>

  <div class="child child-1">
    <style contenteditable>
.child-1 {
  position: absolute;
  top: 0;
  left: 0;
}
    </style>
  </div>

  <div class="child child-2">
    <style contenteditable>
.child-2 {
  position: absolute;
  top: 30%;
  right: -25px;
}
    </style>
  </div>

  <div class="child child-3">
    <style contenteditable>
.child-3 {
  position: absolute;
  bottom: 5px;
  left: 10px;
}
    </style>
  </div>
</div>

style {
  display: block;
  font: 700 14px/1.5 MonoLisa, "Operator Mono", Monospace;
  white-space: pre-wrap;
  padding: 1rem;
}

.wrap {
  border: 5px solid lightcoral;
  padding: 1rem;
  height: 50vh;
  > style {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

body {
  margin: 2rem;
}
* {
  box-sizing: border-box;
}

.child {
  background: darkorange;
}

const styleBlocks = document.querySelectorAll("body style");

styleBlocks.forEach((block) => {
  block.innerText = block.innerText.trim();
});