html - 将容器的内容放在一起

我正在尝试为每个单词正上方的文本中的每个单词显示一个定义（定义是否重叠都没有关系。稍后，我将隐藏所有定义，并且一次只显示一个。）

问题在于，行的最后定义和最后一个单词不会保持在一起。该词始终在下一行，而定义始终在前一行。

如何使它们粘在一起？

这是一个小提琴：https://jsfiddle.net/fiddledidi/vtub581m/

body .paircontainer {
  position: relative;
}

.def {
  position: absolute;
  bottom: 3.75em;
}

.def span {
  position: absolute;
  display: block;
}

<div style="line-height: 375%">
  <p>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
  </p>

最佳答案

使.paircontainer为inline-block。另外，相对/绝对关系应该像下面的代码片段一样进行更改，并且我还调整了绝对元素的bottom设置，并将line-height分配给了p标记而不是其父标记：

.x {
line-height: 375%;
}
.paircontainer{
  position: relative;
  display: inline-block;
}

.def {
  position: absolute;
  bottom: 1.2em;
}

<div>
  <p class="x">
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
        <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
        <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>    <span class="paircontainer">
            <span class="def">
              <span>Definition
              </span>
    </span>
    <span>Word
              </span>
    </span>
  </p>