<p>Dostępne: </p><p style={{color:'green'}}>{props.ile_aktywne}</p><p>Niedostępne: </p><p style={{color:'red'}}>{props.ile_nieaktywne}</p>
I want it to format as two lines
- "Dostępne: 1"
- "Niedostępne: 2"
CodePudding user response：
Don't use a paragraph if you don't want to use it. That's what a <span> or <div> is for.
However, you can modify your HTML here:
<p>Dostępne: <span style="color:green">1</span></p>
<p>Niedostępne: <span style="color:red">1</span></p>CodePudding user response：
P tag will(If blocked behavior is not changed by CSS or Javascript) always creates a new line because it is a block tag. To get your output you can wrap it with a span tag as it is an inline tag.
<p>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></p>
<p>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></p>
and if you want it as an ordered list add autonumbering. You can wrap with ol and replace p tag with li.
<ol>
<li>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></li>
<li>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></li>
</ol>
Please check this as reference https://www.w3schools.com/html/html_blocks.asp