Solution 1 :

I tried your code and it works as it’s supposed to.

You don’t even need to display it as flex and use flex-direction: column;, the <br/> element does that itself (I mean in this case, not always).

Check your CSS code again, there might be something that overrides your current styling, otherwise it should be work as you want.

Solution 2 :

Your code is fine. You might want to check your CDN mate. 🙂

Problem :

I had tried to to change the line of the two text in HTML in which both of them are enclosed in a <div> </div> tag.

In this div the tags which are present are as follows:

 <p class="ftype">I am Afnan Ahmad</p><br>
 <p class="stype">I know</p>

As you can see I had already tried <br> to change the lines
This div has the following CSS properties


I had also tried giving each of the paragraph tag its full space by adding:-


In the paragraph of class stype I am using Typed.js.
Also, the above CSS codes are written by Tailwind css.
This result came up like this

How can I shift those div into a new line