I do not want to inherit the child opacity from the parent in CSS

Question

I do not want to inherit the child opacity from the parent in CSS.

I have one div which is the parent, and I have another div inside the first div which is the child

Answer 1

It seems that display: block elements do not inherit opacity from display: inline parents.

Codepen example

Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?