Оберните две строки текста в адаптивный дизайн

Question

как мне добиться этого для адаптивного дизайна?

C       Cmaj7      F      
Imagine there's no heaven 

C         Cmaj7  F      
It's easy if you try 

C       Cmaj7            
Imagine there's 
   F
no heaven 

C         Cmaj7        
It's easy if 
    F
you try 

Answer 1

Оборачивая каждое слово в элементе, в данном случае span, мы можем принудительно задать интервал между строками, когда они начнут перенос.

Псевдоэлемент ::before можно использовать для установкиаккорд в любом слове, используя content: attr(data-chord); и размещая его над этим словом - эффективно выводя его из обычного позиционирования DOM.

Надеюсь, это поможет.

p {
  margin-top: 0;
}

p span {
  display: inline-block;
  padding-top: 1.4em;
}


p span[data-chord] {
  position: relative;
}

p span[data-chord]::before {
  position: absolute;
  bottom: 1.4em;
  content: attr(data-chord);
  font-size: 80%;
}

<p>
  <span data-chord="C">Imagine</span>
  <span data-chord="Cmaj7">there's</span>
  <span>no</span>
  <span data-chord="F">heaven</span>
</p>

<p>
  <span data-chord="C">It's</span>
  <span>easy</span>
  <span data-chord="Cmaj7">if</span>
  <span>you</span>
  <span data-chord="F">try</span>
</p>