title: How to attach a div to input value in rendered list?
body: <p>I need to append a div to the input value in the list so I can add a style class to the div and move the input value text further to the right. This is the only way I can think of to style the input value text. Can this be done? Is there a better way to do it? Here is what I have so far. I am trying to avoid using innerHTML.
  Note: If you uncomment the dummy text in the html snippet you will see what I am trying to accomplish.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const todoForm = document.querySelector('.todo-form');
  const todoInput = document.querySelector('.todo-input');
  const todoItemsList = document.querySelector('.todo-items');
  
  let todos = [];
  
  
  todoForm.addEventListener('submit', function(e) {
    e.preventDefault();
    addTodo(todoInput.value);
  });
  
  function addTodo(input) {
    if (input !== '') {
      const todo = {
        id: Date.now(),
        name: input,
        completed: false,
      };
      todos.push(todo);
      renderTodos(todos);
      todoInput.value = '';
    }
  }
  
  function addCheckbox() {
    const checkBox = (cb = document.createElement('input'));
    cb.type = 'checkbox';
    cb.class = 'checkbox';
    cb.checked = false;
  }
  
  function renderTodos(todos) {
    // run through each item inside todos
    todos.forEach((item) =&gt; {
      addCheckbox();
      const deleteButton = document.createElement('button');
      deleteButton.className = 'delete-button';
      const li = document.createElement('li');
      // textDiv = document.createElement('div');
      // textDiv.class = 'text-container';
      li.setAttribute('class', 'item');
      li.setAttribute('data-key', item.id);
      li.appendChild(cb);
      li.append(item.name);
      // li.appendChild(textDiv);
      li.append(deleteButton);
      todoItemsList.append(li);
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
  }
  
  body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: hsl(194, 100%, 70%);
    font-family: 'Roboto', sans-serif;
  }
  
  button {
    display: inline-block;
    padding: 0.35em 1.2em;
    border: 0.1em solid hsl(0, 0%, 0%);
    margin: 0 0.3em 0.3em 0;
    background: hsl(0, 0%, 0%);
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: hsl(0, 0%, 100%);
    text-align: center;
    transition: all 0.2s;
  }
  
  button:hover {
    cursor: pointer;
    background-color: hsl(0, 0%, 100%);
    color: hsl(214, 11%, 13%);
  }
  
  ul {
    list-style-type: none;
  }
  
  .container {
    min-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  
  h1 {
    color: hsl(0, 0%, 100%);
    font-size: 3rem;
  }
  
  
  /* To Do Form */
  
  .todo-form {
    margin: 40px 0px;
  }
  
  .todo-input {
    width: 250px;
    border: none;
    outline: none;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
    font-size: 1rem;
  }
  
  .todo-items {
    min-width: 350px;
    height: auto;
  }
  
  
  /* Item style */
  
  .item {
    height: auto;
    background-color: #fff;
    margin: 1em;
    padding: 10px;
    font-size: 1.2rem;
    vertical-align: middle;
    border-radius: 5px;
  }
  
  .checkbox {
    width: 1.5em;
    height: 1.5em;
    margin-right: 20px;
    vertical-align: middle;
  }
  
  .delete-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    float: right;
    width: 25px;
    height: 25px;
    background-color: hsl(348, 93%, 56%);
    border: none;
    outline: none;
    /* border-radius: 7px; */
    /* padding: 2px 5px; */
    /* margin-left: 10px; */
    font-size: 0.8rem;
    font-weight: 550;
    text-align: center;
    vertical-align: middle;
  }
  
  .delete-button:hover {
    background: pink;
  }
  
  .checked {
    text-decoration: line-through;
  }
  
  .text-container {
    min-width: 100px;
    height: 50px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1&gt;To Do&lt;/h1&gt;
  
    &lt;form class="todo-form"&gt;
      &lt;input type="text" class="todo-input" placeholder="add a todo item"&gt;
      &lt;button type="submit" class="add=button"&gt;Add&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;ul class="todo-items"&gt;
      &lt;!--- dummy item ---&gt;
      &lt;!--&lt;li class="item" data-key="1594003133171"&gt;
                  &lt;input class="checkbox" type="checkbox"&gt;
                  Get on schedule
                  &lt;button class="delete-button"&gt;x&lt;/button&gt;--&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>