如果在textarea中插入段落，如何设置div的其他位置

Question

I would like to set that if I press enter in my textarea between the words "Write Here" and "Guys", the two boxes with the words "Write" and "Here" should be displayed one next to the other orizontally, and the box with "Guys" should be under the "Write" one.

And if there are four words with the same example of before, the fourth box should be next to the "Guys" one.

In my code I wrote that all the boxes will display orizontally, if there is space to disply them, because I don't know how to put a box below the others if ther is an "enter space" in the textarea.

Whit the code is much easier to understand:

JSfiddle

HTML:

<div id="faketxt" contenteditable>Write Here
Guys</div>
<button id='btn'>OK</button><br>
<div id='boxes'>

CSS:

#faketxt {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

.fakes{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
  display:inline-block;
}

#boxes{
  display : flex;
}

JQuery:

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var wordLimit = 1;
  var words = primo.innerHTML.replace(/(<([^>]+)>)/ig,"").split(/\s/);
  if (words.length) {
    var count = 0;
    var div = createDiv();
    words.forEach(function(word) {
      if (++count > wordLimit) {
        count = 1;
        div = createDiv();
      }
      if (div.innerHTML) {
        div.append(' ');
      }
      div.append(word);
    });
  }
});

function createDiv() {
  div = document.createElement('div');
  div.className = 'fakes';
  document.getElementById('boxes').append(div);
  return div;
}

Answer 1

try this

var words = primo.innerText.replace(/(<([^>]+)>)/ig,"").split(/\s/);

replace below line

  if (div.innerHTML) {
    div.append(' ');
  }

with

  if (word == '') {
    div.className = '';
  }