Question: I have got contentEditable `div` which each letter have own element, like: 

```
<div contenteditable="true">
    <p id="p1">
        <span id="s1">S</span>
        <span id="s2">o</span>
        <span id="s3">m</span>
        <span id="s4">e</span>
        <span id="s5">&nbsp;</span>
        <span id="s6">t</span>
        <span id="s7">e</span>
        <span id="s8">x</span>
        <span id="s9">t</span>
    </p>
</div>

```

And I am trying to justify some longer text using `text-align: justify`, but this don't work. That is strange, because `text-align: center` and `text-align: right` works. 

After that I am trying to do that using a script which adds `margin-right` to each space, but when I am writing new text into paragraph it crashes. 

How can I do that (and save `id` and other attributes in each element) using JavaScript and/or JQuery?

Answer: 
You can achive this by wrapping the words in an `span` tag with: `display: inline-block;`.
example: <https://codepen.io/MaxViewUp/pen/XeMJmX?editors=1100>

```
<div id="d1" contenteditable="true">
 <p id="p1">
  <span class="word">
    <span id="s1">S</span>
    <span id="s2">o</span>
    <span id="s3">m</span>
    <span id="s4">e</span>
  </span>
  <span id="s5">&nbsp;</span>
  <span class="word">
    <span id="s1">S</span>
    <span id="s2">o</span>
    <span id="s3">m</span>
    <span id="s4">e</span>
  </span>
 </p>
</div>

```
use text-align: justify with display:flex(mandatory at times) this should work.