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: 
For this problem, I think the flexbox approach is the best to take. Add an `id` to your `<div>` or give it style so that it take the width you want it to take, for example :

```
<div contenteditable="true" id="container">
    <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>

```

Then in your css, add the following :

```
#container {
    width: 400px;
}

#p1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

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