CSS animation breaks when applied to a "displayed" passage (with Harlowe on Twine 2.0.8)

welham14

SO!
New to Twine, familiar with CSS and Javascript(self-taught hobbyist)
I have styled a div to change color and slide upwards from the bottom of the screen using a CSS animation.
A separate passage uses this div as well.
So the Start passage animates correctly, more or less.
Then I try to run a display macro to pull some text from another passage that is also wrapped in my animated div. This gives strange results.

Issue: The second "displayed" passage animates similar to the first, but all my text is squished up on the left side, wrapping every single word to a new line. This makes for poor legibility lol.

Possible Reasons:
Maybe the default tw-expression or tw-passage CSS classes are causing a bit of a mashup with my own styling parameters?
I've combed many forums for countless hours, and tried to re-write my CSS like 1000 times with different setups.

Through debugging I've noticed that the weird text wrapping/div width only happens when I have my animated div's position set to "absolute." But this is also the only option I have if I want to animate the div properly.

Even just the slightest nudge of inspiration would be greatly appreciated!

CLICK HERE TO SEE THE ISSUE IN ACTION

CSS:

@keyframes tween{
0% {
	top:100%;
}

40%{
	top:0%;
	color:#3ADF00;
}

100%{
	color:white;
	top:0%;
}
}

#passageText{
	width:60%;
	background-color:black;
	top:100%;
	position:absolute;
	display:inline;
	color: #3ADF00;
	animation-name: tween;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}