Is it possible for an element to “go through” structural rules?

Question

I'll start with an example

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
  }

<div id="AllStuffs">
  <div class="Item">I am static</div>
  <div id="DynamicTexts">
    <div class="Item">Lets pretend</div>
    <div class="Item">that we are dynamic</div>
  </div>
</div>

Run codeHide result

Basically, it would be convenient for me to have an element that separates dynamic elements from static (or maybe dynamic elements from several sources or something else), in this case "DynamicTexts".

At the same time, I want this separator element to be completely invisible to the document structure and obey the CSS rules, as if all the "elementary" elements were direct children of the "AllStuffs" element, which in this case could result in 3 red boxes in a row.

Is there any way to force this "pass" mode on an element?

: , , .

Answer 1

, float:

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  float: left;
  }
#AllStuffs, #DynamicTexts {
  list-style: none;
  margin: 0;
  padding: 0;
  }
#AllStuffs {
  overflow: auto; // clearfix the floats inside
  }

<ul id="AllStuffs">
  <li class="Item">I am static</div>
  <li>
    <ul id="DynamicTexts">
      <li class="Item">Lets pretend</li>
      <li class="Item">that we are dynamic</li>
    </ul>
  </li>
</ul>

Hide result

, , .

Answer 2

, . flexbox:

.Item {
  width:100px;
  height:100px;
  margin:20px;
  background-color:rgb(255,0,0);
  }

#AllStuffs {
  display:flex;
  flex-direction:row;
}
#DynamicTexts {
  display:flex;
  flex-direction:row;
}

<div id="AllStuffs">
  <div class="Item">I am static</div>
  <div id="DynamicTexts">
    <div class="Item">Lets pretend</div>
    <div class="Item">that we are dynamic</div>
  </div>
</div>

Hide result

Answer 3

, DOM. , CSS , ?

AllStuffs>Item
{
    color: green;
} 

DynamicText. , JS, DOM -.

, . .

, , .