Ensure a div fits p to one line - html

Question

I have the following, which animates a message. The issue is with the width of #AdvertBox. If I don't set a width, it expands to 100% of the page. If I set an arbitrary width and it's too small, the second message takes up two lines. What should I set it to so it will always be as wide as the second message, maybe with a small amount of padding?
#AdvertBox {
height: 55px;
overflow: hidden;
position: relative;
background: black;
color: white;
border: 1.75px solid yellow;
font-size: 35px;
font-style: italic;
border-radius: 1px;
width: 45vw;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 55px;
text-align: center;
/* Starting position */
transform: translateX(100%);
/* Apply animation to this element */
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {
transform: translateX(100%);
}
25% {
opacity: 1;
transform: translateX(0%);
}
39% {
opacity: 0;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(0%);
}
}
.popIn p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 55px;
text-align: center;
/* Starting position */
transform: translateY(-100%);
/* Apply animation to this element */
animation: popIn 10s linear infinite;
}
#keyframes popIn {
/* Move it left */
0% {
transform: translateY(-100%);
}
/* Stop It */
30% {
transform: translateY(-100%);
}
/* fade out */
42% {
transform: translateX(0%);
}
/* fade out */
70% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div id="AdvertBox">
<div class="scroll-left">
<p style="position: absolute; z-index: 1 ">
First Message
</p>
</div>
<div class="popIn">
<p style="position: absolute; z-index: 2 ">
Second, longer message to drop down
</p>
</div>
</div>

Answer 1

You can add white-space: nowrap; to your .popIn p style to prevent the text from wrapping.
I would also recommend removing the width: 100%; from the .popIn p so that your scrolling animation does end to early. With width: 100%; set on the <p> it will inherit the width of the parent, which will be shorter then the overflowing text of the <p>, making you animation end early.
You might also want to make these same style updates to your other animated <p>
See this fiddle for a demo