JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centering-container">
  <div class="wrapper">
    <div class="main-content" contenteditable>
      main-content FOOOOO
    </div>
    <div class="box top-box">
      <p>top box</p>
      <p>top box</p>
    </div>
    <div class="box bottom-box">
      <p>bottom box</p>
      <p>bottom box</p>
    </div>
    <div class="box left-box">
      <p>left box</p>
      <p>left box</p>
    </div>
    <div class="box right-box">
      <p>right box</p>
      <p>right box</p>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.centering-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
}

.box {
  border: 1px solid #333;
}

.top-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
}

.bottom-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

.left-box {
  position: absolute;
  right: 100%;
  bottom: 0;
  /* main-contentの下の線に合わせる場合 */
}

.right-box {
  position: absolute;
  left: 100%;
  top: 0;
  /* main-contentの上の線に合わせる場合 */
}