Text non in the same line - html

Question

Anyone know what I'm doing wrong? I can't put the two elements in the same line and they are in two separate levels.
I would like to recreate, using only HTML and Css, an automatic typewriter effect with variable text.
I am a beginner with HTML and Css so I don't understand much but it would be very nice if someone explained my mistake in detail.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>

Answer 1

I solved by adding display:flex; align-items: baseline; to h1.
The flexbox items are aligned at the baseline of the cross axis.
By default, the cross axis is vertical. This means the flexbox items
will align themselves in order to have the baseline of their text
align along a horizontal line.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
display:flex;
align-items: baseline;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>