Any idea why the label and the progress bar from the cyan rectangle are not inline?

Question

I added at the end of css display inline and position relatove to both elements but it foesn't seem to work. Help.
https://code.sololearn.com/Wu8ZcXRQ6tSQ/?ref=app

Answer 1

💜 Purpura S 🍇 The CSS Grid is causing the issue with the immediate descendants.

.chart {
display: grid;
}

<div class="chart">
<label/><progress/>
</div>

That seems to force the grid on the immediate child elements to take precedence over the inline styles.

Remove or change the display:grid for .chart and see it work.

----
Alternative:
----
You could also just wrap your label and progress tags in a div so those aren't the immediate descendants.

<div class="chart">
<div>
<label/><progress/>
</div>
</div>

Answer 2

Ah, I get it now. I got some issues with the grid. I think I will add another div to see what happens if I wrap those tags.