Omit additional wrappers in CSS, display: contents;

In situation where you want to style elements like those were neighbours, but unfortunately two of them are in additional wrapper that you can’t get rid of:

<div class="flex">
  <div class="red-block"></div>
  <div class="wrapper">
    <div class="el">1</div>
    <div class="el">2</div>
  </div>
</div>

and you want them to be inside flex and be placed by eg. space-between and this is the result:

Add display: contents; to the wrapper and problem is solved:

display: contents makes the element to ignore itself in styling.

Browser support:

Codepen: here