How to make three texts position on top of each slots respectively?

Question

I am developing a simple random name picker website and I would like to know how to make three texts positioned on top of each slot and aligned center in each slot simultaneously.

The current image of the website looks like this.

Pug/ Jade:

#lucky-draw
.title
  //- Pug loader currently does not handle webpack alias so we will use relative path here
  include ../assets/images/title.svg

.slots-header-container
  .slot-text-left
    p Left Additional Text

  .slot-text-center
    p Center Additional Text

  .slot-text-right
    p Right Additional Text

.slots-container
  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

  .slot
    .slot__outer
      .slot__inner
        .slot__shadow
          #reel.reel

    #sunburst.sunburst
      img(src="~@images/sunburst.svg" alt="sunburst")

button#draw-button.solid-button Run!

Sass:

.slots-header-container{
  text-align: center;
  position: absolute;
  top: 20%; // Adjust as needed to move them further upward
  width: 100%;
}

.slot-text-left {
  left: 0;
  margin-left: 10px; // Adjust as needed
}

.slot-text-right {
  right: 0;
  margin-right: 10px; // Adjust as needed
}

Answer 1

I have eventually grouped each text and slot for the solution.

Pug:

#lucky-draw
.title
  //- Pug loader currently does not handle webpack alias so we will use relative path here
  include ../assets/images/title.svg

.slots-container
  .slot-group
    .slot-text
      p Song Title

    .slot
      .slot__outer
        .slot__inner
          .slot__shadow
            #reel.reel

      #sunburst.sunburst
        img(src="~@images/sunburst.svg" alt="sunburst")

  .slot-group
    .slot-text
      p Genre

    .slot
      .slot__outer
        .slot__inner
          .slot__shadow
            #reel.reel

      #sunburst.sunburst
        img(src="~@images/sunburst.svg" alt="sunburst")
        
  .slot-group
    .slot-text
      p Style

    .slot
      .slot__outer
        .slot__inner
          .slot__shadow
            #reel.reel

      #sunburst.sunburst
        img(src="~@images/sunburst.svg" alt="sunburst")

button#draw-button.solid-button Run!

Sass:

.slot-group {
  display: flex;
  flex-direction: column;
  align-items: center;

  .slot-text{
    font-size: 30px;
  }

  .slot-text,
    .slot {
      text-align: center;
      margin-bottom: 10px; // Adjust spacing between text and slot
    }

  .slot {
    margin-right: 10px; // Adjust spacing between slots as needed
  }
}

Answer 2

Since it looks like you'll be outputting the results of a user action onto the page (e.g. displaying names when the user presses a button). Consider using the <output> element instead of divs. It's more semantic, more accessible, and importantly: labelable — which means you can use a <label> element to give it a caption.

Consider changing your HTML structure to something more like this, and use CSS flexbox to ensure the labels stay centered above each output.

Also be careful not to duplicate the same ID multiple times within the same document, as that is invalid HTML. IDs can be used only once.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.slots {
  display: flex;
  gap: 0.5rem;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slots output {
  width: 20ch;
  height: 2rem;
  display: block;
  border: 1px solid black;
}

<div class="slots">
  <label class="slot">
    <span>Left</span>
    <output id="slot-left" for="run-button"></output>
  </label>
  <label class="slot">
    <span>Center</span>
    <output id="slot-center" for="run-button"></output>
  </label>
  <label class="slot">
    <span>Right</span>
    <output id="slot-right" for="run-button"></output>
  </label>
</div>
<button type="button" id="run-button">Run!</button>