Why is my ::after text overlapping each other

Question

I want to display word's translation under each word of my text.

I tried to display translations in after blocks, but they are overlapping when translations are longer than original words.

.word {
    position: relative;
    white-space: pre-line;
    line-height: 60px;
    display: inline;
}
.word::after {
    content: attr(disp);
    position: absolute;
    font-style: italic;
    top: 5px;
    left: 0;
    font-size: 80%;
}

<div>
  <span class="word" disp="tr1">word1 </span>
  <span class="word" disp="tr2">word2 </span>
  <span class="word" disp="translated3">word3 </span>
  <span class="word" disp="translated4">word4
 </span>
  <span class="word" disp="tr5">word5 </span>
  <span class="word" disp="tr6">word6 </span>
</div>

Is there any way to position each next "block" of two words (original+translation) so it doesn't overlap the previous "block", but without any margin between "blocks" or making all "blocks" to be the same size?

Answer 1

Try the following:

.word {
    white-space: pre-line;
    line-height: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;     
}

.word::after {
    content: attr(disp);
    font-style: italic;
    font-size: 80%;
}

<div>
  <span class="word" disp="tr1">word1 </span>
  <span class="word" disp="tr2">word2 </span>
  <span class="word" disp="translated3">word3 </span>
  <span class="word" disp="translated4">word4
 </span>
  <span class="word" disp="tr5">word5 </span>
  <span class="word" disp="tr6">word6 </span>
</div>