how do i bring two span together in a line in reactjs?

I have two span tags inside the Text tag(From chakraui). and inside a span tag, I have Typewriter tag (from typewriter-effect). if I am not using the Typewriter tag then the spans come in the same line but while using the Typewriter tag it doesn't go in there the same line.

here is my code :

<Text>
        <span style={{ color: "#3182CE" }}>I Am </span>
        <span style={{ color: "#C18344" }}>
          <Typewriter
            options={{
              strings: ["Web Developer.", "Freelancer.", "Geek."],
              autoStart: true,
              loop: true,
              delay: 150,
            }}
          />
        </span>
      </Text>