I have an HTML block like this:
<div class="notice notice-info">
<p class="status-explanations">
<span class="header">Some title here</span><br>
<span class="order-status status-on-hold">One status</span> some explanation text.<br>
<span class="order-status status-processing">Another status</span> some other explanation.<br>
<span class="order-status status-shipped">And another</span> and <span class="order-status status-awaiting-pickup">And one more</span> the explanation goes here<br>
<span class="order-status status-completed">And yet another one</span> and its explanation.<br>
<span class="order-status status-failed">This should be separated</span> with its explanation.<br>
<span class="order-status status-cancelled">And finally this</span> the last one.
</p>
</div>
The last two statuses need to be separated from the ones above them. So I changed <br> to <hr> but there must be some peculiarity with Wordpress and its content renderer, and so when <hr> gets rendered within the <p>, something strange happens, and a closing </p> appears just above <hr> and the rest two of the <span> statuses stay outside of the <p> (I noticed that because my CSS rules mention <span> statuses in reference to their parent <p>, so the ones outside of the <p> stay un-styled.
So my other idea is to add a class to the appropriate <br>, like <br class="hr-style"> for that particular one that separates the two groups of statuses, and write an appropriate CSS rule to style the <br> like a horizontal line. But how do we add a horizontal line to a <br>? TIA
