Add grouping tags in flex structure

Solution 1:

You can add display: contents to the <span> that wraps the content, to make it effectively transparent to the layout, though this does come with accessibility caveats, unfortunately:

*, ::before, ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.form-flex-col-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  outline: 2px solid #f90;
}

.form-flex-col-container span {
  display: contents;
}

.form-flex-col-content {
  flex: 1 1 32%;
  padding-block: 10px;
  outline: 2px solid palegreen;
}

<div class="form-flex-col-container">
<span [formGroup]="myFormA">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
<span [formGroup]="myFormB">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
</div>

JS Fiddle demo.

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.

Due to a bug in browsers, this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box

References:

• display.