Как сделать высоту отзывчивой?

Как сделать высоту текста (слоган) адаптивной?
Я попробовал padding bottom, но он не работает. Есть ли способ изменить высоту текста?

<p class = "logo">LoremIpsum</p>
<p class = "tagline">LoremIpsum</p>
<img class = "mainImage" src = "FullSizeRender.jpg">

css:

body{
  background-color: black;
  margin: 0;
}


.logo{
 font-size: 3em;
 color: white;
 text-align: center;
}


.tagline{
 font-size: 0.9em;
 color: white;
 text-align: center;
 position: absolute;
 top:20%;
 /* padding-bottom: 20%;*/
}

.mainImage{
 width: 50%;
 height: auto;
}