Text cut off when using custom code?

Custom code
1

I have tried adjusting margins, padding, etc. and the descenders are still being cut off on my text, Here’s my code:

				<div class="rw-words rw-words-1">
					<span>Results</span>
					<span>Recognition</span>
					<span>Relevancy</span>
                  <span>Results</span>
					<span>Recognition</span>
					<span>Relevancy</span>
				</div>
			</h2>
		</section>

CSS

.cycle-wrapper{
width: 80%;
position: relative;
margin: 300px 300px 300px 300px;
font-family: ‘Playfair Display’;
padding: 100px;
}
.rw-sentence{
margin: 300px 300px 300px 300px;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #252323;
font-size: 200%;
font-weight: bold;
}
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #252323;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #252323;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #252323;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #252323;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #252323;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #252323;
}
@-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

2

you could add this to your css styles:

  .rw-words>span{
  height:100%
  
  }