<div class="container">
  <div class="demo-box">
    <div class="anchor">1</div>
    <div class="anchored-note">
      <p>This is the content of the anchor that we want to display to <code>the right</code> of the anchor.</p>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1.25rem;
}

.demo-box {
  display: flex;
  flex-direction: column;
  height: 25vw;

  place-content: center;
  align-items: center;
}

/* The demo */
.anchor {
  anchor-name: --anchor-el;
}

.anchored-note {
  position: absolute;
  /* anchor reference */
  position-anchor: --anchor-el;
  /* Position the left of the anchored elem at the right of the anchor */
  left: anchor(right);
  inline-size: 20rem;
  margin-inline-start: 1rem;
}

/* Other styles */
.anchor {
  height: 2rem;
  width: 2rem;
  background: linear-gradient(12deg, magenta, blue);
  color: white;
  display: grid;
  place-items: center;
  border: 2px solid black;
  border-radius: 100%;
}

.anchored-note {
  background: grey;
  color: white;
  padding-inline-start: 1rem;
  border-radius: 20px;
}