JSFiddle - React, Tailwind, and code Playground

HTML

<h3>My tasks:</h3>

<input type= "text" class = "task" id = "task" placeholder = "Enter task" />
<input type= "text" class = "date" id = "date" placeholder = "Enter date" />
<button id="save"> add task </button>

<div class="main-part"> </div>

CSS

div [class*="task-tex"] {
	display: inline-block;
	width: 45%;
}
div [class*="task-date"] {
	display: inline-block;
	width: 50%;
}

JavaScript

$("#save").click(function() {
	var newTask = $("#task").val();
	var newDate = $("#date").val();
	var i = 0;
  
	var element = 
			'<div class = "task-text' + i + '" >' + 
				'<input type= "checkbox" />' +
				newTask +
			'</div>' +
			'<div class = "task-date" >' + newDate + '</div>';
	
	if (newTask.length > 0 && newTask != " ") {	 
		$(".main-part").append(element);
		i++;
  }
  
});