Question: There is a list of rules. The rules specify how to change the word entered. The screenshot shows an example of how the program should work. The result should be a string "aBct". I don't understand how to do this.

```js
function pushRules(list){
    var rules = "";
    var w1 = document.getElementById('inputw1').value;
    var w2 = document.getElementById('inputw2').value;
    var w = w1+'-->'+w2;
    var li = document.createElement("li");
    var rule = document.createTextNode(w);
    li.appendChild(rule);
}

function applyRule() {
    var str = document.getElementById('inputString').value;
    var numRule = document.getElementById('inputNumRules').value;

    for(var i=0; i<str.length; i++){
      // ...
    }
}
```

```html
<div class="addRules">
    <h3>Add Rules</h3>
    <form>
        <label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
        <input type="button" value="Add" onclick="pushRules()">
    </form>
    <h3>Rules:</h3>
    <div class="container_rules">
        <ui id="list"></ui>
    </div>
</div>

<h3>Input string</h3>
<input type="text" id="inputString">
<form>
    <p>Apply the selected rule to the symbol at number:</p><input type="text" id="inputNumRules" value="0">
    <input type="button" value="Apply rule" onclick="applyRule()">
</form>
<h3>Result</h3>
```

![](https://i.stack.imgur.com/FzlOq.png)

Answer: 
You could use `display: flex` property on `li` elements. Or you could use `display: table` on `li` element and `display: table-cell` on pseudo-element. [**DEMO**](https://jsfiddle.net/s6ob0xfy/3/)

```css
ul {
  list-style: none;
  padding: 0px;
}
li {
  display: flex;
}
ul li:before {
  content: '\2713';
  margin: 0 1em;
}
```

```html
<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>
```
Give `li` a left padding and then use the same value for the width of the `li:before` and the same value but negative for the left margin of `li:before`. Remember to display `li:before` as `inline-block` otherwise the `width` will not be applied:

```css
ul {
  list-style: none;
  padding: 0;
}

li {
  padding-left: 2em;
}

ul li:before {
  content: '\2713';
  display: inline-block;
  width: 2em;
  margin-left: -2em;
}
```

```html
<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>
```