margin-top for element inside an absolute positioned div

Question

I have this markup:

.floating {
  position: relative;
}

.floating > .floating-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  box-sizing: border-box;
  background-color: red;
  width: 200px;
  height: 50px;
}

.x-label {
  background-color:yellow;
  margin-top: 1rem;
}

<div class="floating">
  <div class="floating-container">
    <span>some icon</span>
    <span class="x-label">some label</span>
  </div
</div

I would like to position the yellow label a bit below the other label (icon). Why doesn't work the margin-top in this case?