JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div>
    <form id="addThings" type="text">
      <input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
      <input type="button" id="addButton" value="add">
    </form>
  </div>
</body>

CSS

body {
  background-color: white;
}

div {
  width: 750px;
  margin: 0 auto;
  margin-top: 200px;
  margin-bottom: 0;
  padding: 0;
}

form {
  margin: 0 auto;
  display: inline-block;
  margin-bottom: 0px;
}

input {
  padding: 10px 18px;
  float: bottom;
}

input[type=text] {
  border-left: white;
  border-right: white;
  border-top: white;
  font-size: 20px;
  i height: 21px;
  text-align: center;
  outline: none;
  float: right;
  background-color: white;
}

input[type=button] {
  display: inline-block;
  height: 25px border: 0;
  margin: 0 auto;
  font-size: 20px;
  float: right;
}

input[type=checkbox] {
  vertical-align: top;
  width: 10%;
  margin: 15px auto;
  float: right;
}

JavaScript

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    console.log(input);
    var id = "newLine" + i;
    var line = '<input type=\"text\" id=\"' + id + '\" size=\"50\" disabled><input type=\"checkbox\" >';
    console.log(line);
    $('form').append(line);
    var newId = "#" + id;
    $('#myInput').change(function() {
      $(newId).val(input);
    });
    i += 1;
  });
});