Inline-block elements in HTML

Question

My HTML code looks like this and I can NOT edit it:

.container {
  background-color: red;
  display: flex;
}

.container {
  background-color: red;
}

.innero1 {
  display: flex;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

.inner2,
.inner3 {
  margin-left: 3px;
  height: max-content;
}

ul {
  margin: 0;
  padding-left: 3px;
}

<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>

As you can see, the div do not behave like typical inline-blocks.

What I want to achieve is to make it look like this (when resized they jump to the next line):

.one {
  border: 2px solid black;
  display: inline-block;
}

<div class="container">
  <div class="one">Text1</div>
  <div class="one">Text2</div>
  <div class="one">Text3</div>
  <div class="one">Text4</div>
  <div class="one">Text5</div>
  <div class="one">Text6</div>
  <div class="one">Text7</div>
  <div class="one">Text8</div>
</div>

I was thinking of using jQuery detach, but don't think it's very good idea...

EDIT: I DO NOT want to change my html. The final effect should work like in the second snippet, but do not look like it (code)...

Answer 1

Don't you just remove the flexboxes and set all the intermediate containers to display:inline? Like this.

.container {
  background-color: red;
  display: block;
}

.container {
  background-color: red;
}

.inner1, .innero1, .innero2, .four {
  display: inline;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

ul {
  margin: 0;
  padding-left: 0px;
  display:inline;
}

<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Without the entire site to look at it's hard to debug css issues but based on the first fiddle you posted adding this css to the bottom of the css had it working

.container{
  display: inline-block;
}
.innero1 {
  display: inline-block;
}

.innero1 div, .container div {
  float: left; 
  margin-right: .5em;
  display: inline-block;
}
.one { 
  float: left; 
  margin-right: .5em
}

If that doesn't solve you problem let me know and i will see if can help more.

EDIT/Update:

Make sure you add the class I highlighted with the comment in the css. Below is a snippet and here is a fiddle

var lst = $('<div class="stack" />');

$('.one, .inner2, .inner3, .two').each(function(i, v){
  $('<div />').html($(v).html()).appendTo(lst);
});

$('.innero1, .innero2').hide();

lst.appendTo($('.container'));

.container {
	background-color: red;
	display: flex;
}

.container {
	background-color: red;
}

.innero1 {
  display: flex;
}

.one,
.two,
.inner2,
.inner3 {
	border: 2px solid black;
	display: inline-block;
}

.two {
	list-style-type: none;
}

.inner2,
.inner3 {
	margin-left: 3px;
	height: max-content;
}

ul {
	margin: 0;
	padding-left: 3px;
}


/* Add this class to your css */
.stack div {
  border: 2px solid black;
  display: inline-block;
  margin-right: .25em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="innero1">
    <div class="inner1">
        <div class="one">Text1</div>
        <div class="one">Text2</div>
        <div class="one">Text3</div>
        <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>

  <div class="innero2">
      <div class="four">
           <ul>
              <li class="two">Text7</li>
              <li class="two">Text8</li>
           </ul>
      </div>
  </div>
</div>

Answer 3

From what I see you are not using the flex-wrap: wrap property. If you want to have elements break (like typical html/css) then you need to tell it to wrap.

Here is a super basic example:

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start
}

.item {
  padding: 20px;
  margin: 10px;
  background: yellow;
  color: #000000;
  border: 1px solid #000000;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
</div>

I think this answers your question...if not please clarify a bit more. You SHOULD NOT need JavaScript to do what your asking.