Add marquee as part of ab headline - html

Question

So with the possibilities of HTML marquee, I came super close to what I want to create.
.marquee {
background-color: antiquewhite;
width: 150px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.marquee span {
font-size: 40px;
position: relative;
left: 100%;
animation: marquee 2s linear infinite;
}
.marquee:hover span {
animation-play-state: paused;
}
.marquee span:nth-child(1) {
animation-delay: 0s;
}
.marquee span:nth-child(2) {
animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
animation-delay: 3.2s;
}
#keyframes marquee {
0% {left: 100%;}
100% {left: -100%;}
}
p{
display: inline;
}
<p class="marquee">
<span>this is a</span>
<span>simple marquee</span>
<span>using css</span>
<span>using css</span>
<span>simple marquee</span>
</p>
The only 2 problems:
I don't know how to change the height so that the text will stay in the middle
The words overlap and I can't create a clean loop of the words

Answer 1

UPDATE:
I assume I made it. If anything inside this code is a no-go, please let me know.
If not, this will be a possible CSS only solution for anybody who wants to achieve something similar:
HTML:
<div class="marqueemagic">
<div class="scrollingquee">
</div><div class="scrollingquee" aria-hidden="true">
<i> CONVERSION | OPTIMIZATION |</i>
</div><div class="scrollingquee" aria-hidden="true">
<i>CONVERSION | OPTIMIZATION |</i>
</div><div class="scrollingquee" aria-hidden="true">
<i> CONVERSION | OPTIMIZATION |</i>
</div>
<!-- … -->
</div>
CSS:
.marqueemagic {
overflow: hidden;
white-space: nowrap;
width: 150px;
background-color: white;
display: inline-block;
padding-bottom: 5px;
padding-top: 5px;
margin-bottom: 2px;
font-size: 35px;
vertical-align: bottom;
font-weight: 600;
}
.scrollingquee {
animation: marquee 5s linear infinite;
display: inline-block;
padding-right: 10px;
}
#keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
Result:
https://youtu.be/Tuy4FUZmVd8
Of course, you can change speed, width, background color, opacity, font related values etc. as you wish without breaking anything.
With kind regards
Chris