How do you remove a line from <pre> without leaving an empty line?

Question

Given a <pre> containing multiple <span>s, how would you remove one of those <span>s without leaving an empty row?

span {
    background-color: blue;
}
#text2 {
    display: none;
}

<pre>
    <span id="text1">SOME RANDOM TEXT</span>
    <span id="text2">SOME RANDOM TEXT</span>  
    <span id="text3">SOME RANDOM TEXT</span>
</pre>

I've tried switching to a <div> and using white-space but that doesn't get the same result.

Answer 1

set pre white-space:nowrap and set span display to table or block

pre{
      white-space:nowrap;/* nowrap or normal will give you same output*/
}
span {
    display:table;/* use table for same output. you can try display block also */
    background-color: blue;

  
}
#text2 {
    display: none;
}

<pre>
 <span id="text1">SOME RANDOM TEXT</span>
 <span id="text2">SOME RANDOM TEXT</span>  
 <span id="text3">SOME RANDOM TEXT</span>
</pre>