CSS animation create space for word - css

Question

I was trying to do a changing word animation. I have managed to do it. My problem is that this whole sentence is supposed to be one line. Now it is breaking into two lines. How can I manage to get it in one line?
The space between we and solutions is supposed to auto-adjust depending on the changing word.
https://codepen.io/thaha-wahid/pen/abOXvbx
<div class="sliding-statement">
<h1 class="sliding-sentence">
We are engineers, We
<div class="slidingVertical">
<span>Create</span>
<span>Build</span>
<span>Develop</span>
</div>
Solutions
</h1>
</div>
.sliding-statement h1{
font-size: 48px;
margin-bottom: 20px;
padding-bottom: 0;
color: #001b35;
font-weight: bolder;
}
.slidingVertical span{
animation: topToBottom 7.5s linear infinite 0s;
-ms-animation: topToBottom 7.5s linear infinite 0s;
-webkit-animation: topToBottom 7.5s linear infinite 0s;
color: #ffffff;
font-weight: bolder;
opacity: 0;
overflow: hidden;
position: absolute;
background-color: #1ff8dc;
padding: 0px 7px;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

Answer 1

The position absolute styles takes the DOM element not occupy any space in the line. So you can use the parent div to set width based on the child element animation or set the parent width to a constant width.
https://codepen.io/rohinikumar4073/pen/bGdzVOj
body {
background-color: #a3d5d3;
}
.slidingVertical {
display: inline-block;
width: 170px;
display: inline-block;
height: 44px;
animation: changeWidth 7.5s infinite;
}
#keyframes changeWidth {
0%,
32% {
width: 150px;
}
33%,
66% {
width: 120px;
}
67%,
100% {
width: 180px;
}
}
.sliding-statement h1 {
font-size: 48px;
margin-bottom: 20px;
padding-bottom: 0;
color: #001b35;
font-weight: bolder;
}
.slidingVertical span {
animation: topToBottom 7.5s linear infinite 0s;
-ms-animation: topToBottom 7.5s linear infinite 0s;
-webkit-animation: topToBottom 7.5s linear infinite 0s;
color: #ffffff;
font-weight: bolder;
opacity: 0;
overflow: hidden;
position: absolute;
background-color: #1ff8dc;
padding: 0px 7px;
display: flex;
}
.slidingVertical span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3) {
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: translateY(-50px);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: translateY(-50px);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes topToBottom {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: translateY(-50px);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(50px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="sliding-statement">
<h1 class="sliding-sentence">
We are engineers, We
<div class="slidingVertical">
<span>Create</span>
<span>Build</span>
<span>Develop</span>
</div>
Solutions
</h1>
</div>