<input type="text">
<button>add</button>

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Facilis error molestias praesentium ea.</li>
  <li>Distinctio qui doloribus corporis alias!</li>
  <li>Quo eaque culpa reiciendis accusantium!</li>
  <li>Assumenda, amet ipsam. Aperiam, molestiae?</li>
  <li>Ipsa, vero sapiente! Provident, nihil.</li>
  <li>Cumque quo harum deleniti in.</li>
  <li>Recusandae exercitationem odio laudantium et.</li>
  <li>Blanditiis tenetur minima nihil soluta?</li>
  <li>Consequatur eos commodi rerum repudiandae.</li>
</ol>

ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  list-style-position: inside;
}

li:nth-child(4n + 1) {
  grid-column: 1;
}

li:nth-child(4n + 2) {
  grid-column: 1;
  border-bottom: 1px dashed #777;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
}

li:nth-child(4n + 3) {
  grid-column: 2;
}

li:nth-child(4n + 4) {
  border-bottom: 1px dashed #777;
  grid-column: 2;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
}

const list = document.querySelector("ol");
const input = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => {
  list.insertAdjacentHTML("beforeend", `<li>${input.value}</li>`);
  // input.value = '';
});