How to add a new line in HTML when using flex?

Question

I want separate messages to have some vertical distance in between them. Every message is a span and here is the CSS code that I wrote for spans:

span {
        color: #eeeeee;
        float: right;
        font-size: 120%;
        margin-right: 6%;
        margin-left: 30%;
        background-color: #393e46;
        border-radius: 25px 25px 5px 25px;
        padding: 10px 18px 10px 20px;
        margin-top: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }

And here is the code for 2 messages next to each other:

<span style="padding: 10px 20px 10px 18px;">hey</span>
<br>
<span style="float: left; margin-left: 6%; margin-right: 30%; border-radius: 25px 25px 25px 5px; background-color: rgb(104, 109, 117); padding: 10px 20px 10px 18px;">Hi!</span>

And here is the result:

I forgot to say that this is an issue for short messages (less than 4 characters long). Is there any way to fix this? I tried using div instead of span and I had the same issue there. I tried tweaking margin but it worked not good enough to use it (long messages look bad with those margins and the whole code starts to get messy and I don't want that).

Thanks in advance.

Answer 1

Add clear: both; to your <br> to break the floating, this will result in a new line.