i really need help with this ( html / css )

Question

This is a div element with a sample paragpraph inside it.
____________________________________________________________________________
<div class="jaylen1"><p>Below, we take a close look at what makes up an effective paragraph and explain how to write one that suits your needs.</p></div>
___________________________________________________________________________
AND THIS IS THE CSS FOR IT.
___________________________________________________________________________
.jaylen1 {
width: 50px;
height: 50px;
background: red;
transition: width 5s;
}
:hover.jaylen1 {
width: 1000px;
}
_______________________________________________________________________
put them together and run the code. when u hover your mouse over the box
the thing that is happening is the text is already visible and outside the box before u hover ur mouse over it.
the thing i want to happen is : i want the text to slowly apear on 1 line as the box starts to get bigger. please help me i cant find solutions online.

Answer 1

.jaylen1 {
width: 50px;
height: 50px;
background: red;
transition: width 5s;
/* ********** */
white-space: nowrap;
overflow: hidden;
/* ********** */
}
:hover.jaylen1 {
width: 1000px;
}