如何阻止</p>标签换行？将指定HTML代码优化为两行布局

你当前的代码里，每个<p>标签都是块级元素，会自动换行，导致文字和对应数值分开显示。要实现**"可用：X"、"不可用：Y"**的两行布局（原代码中Dostępne对应"可用"，Niedostępne对应"不可用"），只需把同一行的文本和数值放在同一个<p>标签内，用<span>单独给数值设置颜色即可——<span>是行内元素，不会打断行内内容的排版。

优化后的代码如下：

<p>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></p>
<p>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></p>

修改后，文字和对应颜色的数值会在同一行显示，完全满足你要的两行布局需求。

内容的提问来源于stack exchange，提问作者PrzepalonyDecybel