I created a button to add a form with javascript.
Currently it is added below, but I would like to make it so that it is added to the right, line breaks when it reaches the edge of the screen, and it is added side by side.
I would appreciate it if you could teach me.

<input type = "text" placeholder = "form-0">
<button on click = "deleteBtn (this)">Delete</button>

<input type = "button" value = "add form" onclick = "addForm ()">
input {
  display: block;
  margin-top: 10px;
#form_area input {
    display: flex;
    flex-direction: column;
var i = 1;
function addForm () {
var input_data = document.createElement ('input');
  input_data.type ='text';
  input_data.id ='inputform_' + i;
  input_data.placeholder ='Form-' + i;
  var parent = document.getElementById ('form_area');
  parent.appendChild (input_data);
  var button_data = document.createElement ('button');
  button_data.id = i;
  button_data.onclick = function () {deleteBtn (this);}
  button_data.innerHTML ='Delete';
  var input_area = document.getElementById (input_data.id);
  parent.appendChild (button_data);
  i ++;
function deleteBtn (target) {
  var target_id = target.id;
  var parent = document.getElementById ('form_area');
  var ipt_id = document.getElementById ('inputform_' + target_id);
  var tgt_id = document.getElementById (target_id);
  parent.removeChild (ipt_id);
  parent.removeChild (tgt_id);
  • Answer # 1

    It seems that the form is not set, but is it one form as a whole?
    I don't know if this is one form.
    Also, I don't know what to do with the deletion process.
    Does the id of input need not be name?

  • Answer # 2

    If this doesn't work, add the conditions to the question.

          #form_area input {
                display: inline-block;