Format text differently after line break <br>

Issue

I would like to format a text differently within a "p" tag with a class. There is a line break by "br" and the following text should be formatted differently. Is there a solution for this from css?
Below is the code example.

To-Do: Format ${getDate(loadStoredTasks())}" different to ${zaehlerRechner(loadStoredTasks())}

<div class="list-task-responsible">
   <img src="img/energy-consumption_light.png"/>
   <p class="list-task-notes">${zaehlerRechner(loadStoredTasks())} <br> 
   ${getDate(loadStoredTasks())}</p>
</div>

800,10 kWh: is correct

17.11.2022 - 20.11.2022: should have other format (should look like: 17.11.2022 - 20.11.2022)

Solution

You may wrap the second line in its own element set all the style you need to that element, e.g.

.list-task-notes {
   font: 2rem/1 system-ui;
}

.list-task-notes small {
   font-size: 50%;
}

<p class="list-task-notes">
  800,10 kWh<br> 
  <small>17.11.2022 – 20.11.2022</small>
</p>

Or you could use the ::first-line pseudoselector to change the formatting of the first line (here's a list of the allowed style for this psuedoselector)

.list-task-notes {
   font: 1rem/1.5 system-ui;
}

.list-task-notes::first-line {
   font-size: 200%;
}

<p class="list-task-notes">
      800,10 kWh<br> 
      17.11.2022 – 20.11.2022
    </p>

Answered By - Fabrizio Calderan