this is my html title and its style:

<div class="title-wrapper">
    <div class="upper-title">
      DYNAMICALLY ADDING TITLE
    </div>
    <div class="lower-title">
      DYNAMICALLY ADDING TITLE
    </div>
</div>

css:

title-wrapper {
    display: flex;
    flex-wrap: wrap;
    color: #FFFFFF;
    border-left: 1px solid white;
    padding-left: 2.2%;
}

how to make so that upper-title and lower-title are side by side with little gap between them (i.e. 5px) BUT if they are too wide for a screen when side by side they will go into 2 lines and gap between them should be 18px. So 18px gap only when in two lines!

I’ve also tried using display: grid but then gap is 18px when side by side as well.
I also tried to make div class=vertical-line and put it inside title-wrapper where I would get the same result as with flex and grid.

The problem is that I have this border-left and it should be the same height as title-wrapper, that is why I can’t use margin-bottom on upper-title, it won’t look good when title is on one line.