What to do so the duplicated fields appear on the right?

I want when to click on the button the duplicate field to appear on the right half of the page next to the original field.

I created this code, but when I click on the button the duplicated fields appear to bellow the original, it should be the same as the original only to be on the right half of the page aligned with the original.

HTML

    <div id="inputs" class="short">
        <input id="input1" class="input" placeholder=" Add label..." type="text">
        <hr class="hr1">
        <input id="input2" class="placeholder" placeholder=" Add placeholder..." type="text">
        <button class="btn btn-delete">
          <i class="fas fa-trash-alt"></i>
        </button>
        <button onclick="duplicate()" class="button1">
          <i class="fa fa-plus"></i>
        </button>
      </div>

      <div id="duplicatedInputs"></div>

JavaScript

var counter = 1;

function duplicate() {
  // Get the input fields container
  var inputContainer = document.getElementById("inputs");

  // Get the input fields to duplicate
  var input1 = document.getElementById("input1");
  var input2 = document.getElementById("input2");

  // Clone the input fields
  var clonedInput1 = input1.cloneNode(true);
  var clonedInput2 = input2.cloneNode(true);

  // Generate unique IDs for the cloned input fields
  clonedInput1.id = "input1-" + counter;
  clonedInput2.id = "input2-" + counter;
  counter++;

  // Append the cloned input fields to the duplicated inputs container
  var duplicatedInputsContainer = document.getElementById("duplicatedInputs");
  duplicatedInputsContainer.appendChild(clonedInput1);
  duplicatedInputsContainer.appendChild(clonedInput2);
}