<header>
  <h1>TODOs</h1>
</header>

<form id="todo-form" class="todo-form">
  <label>
    <span class="screen-reader-text">New TODO</span>
    <input type="text" name="todo">
  </label>
  <button>Add</button>
</form>

<ol id="todo-list" class="todo-list">
  <li>
    <button aria-label="Complete">
      ×
    </button>
    Walk the dog
  </li>
  <li>
    <button aria-label="Complete">
      ×
    </button>
    Figure out what doing with life
  </li>
</ol>
header {
  border: 1px solid black;
  margin: 1px;
  padding: 1rem;
  text-align: center;
}

.todo-form {
  border: 1px solid black;
  text-align: center;
  padding: 1rem;
  margin: 1px;
  label {
    flex: 1;
  }
  input {
    border: 1px solid black;
  }
  > button {
    border: 1px solid black;
  }
}

.todo-list {
  border: 1px solid black;
  padding: 1rem;
  li {
    border: 1px solid black;
    margin: 1px;
    padding: 0.5rem;
  }
}

.screen-reader-text {
  text-indent: -9999em;
  width: 0;
  height: 0;
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.