Why is my ::after text overlapping each other-CodePudding

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  disp="tr1">word1 </span>
  <span  disp="tr2">word2 </span>
  <span  disp="translated3">word3 </span>
  <span  disp="translated4">word4
 </span>
  <span  disp="tr5">word5 </span>
  <span  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?

Here is a JSFiddle demo: https://jsfiddle.net/a6gf3hbt/1/

CodePudding user response：

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  disp="tr1">word1 </span>
  <span  disp="tr2">word2 </span>
  <span  disp="translated3">word3 </span>
  <span  disp="translated4">word4
 </span>
  <span  disp="tr5">word5 </span>
  <span  disp="tr6">word6 </span>
</div>