title: How to make an element move on the right after an input?
body: <p>I am developing a project, and I made a custom input element. The problem is that whenever I try to add text, it shifts to the next line, so I was making it stop and shifting the position whenever input is added. I am making it go to the right whenever input is added(in my project, you can only add 1 text at a time). For the first few times, it works, but after 4 inputs, the space between the cursor(made by me/custom) and the closest text becomes more than it should be, for now, for a new input, the code adds <code>5px</code> to the current margin, and the problem occurs, if I add <code>4px</code>, the text moves too far. Is there any way that I can make my custom cursor move just as needed for it to look good.</p>
  <p>Code(Note: I have code that is not used/is not needed, but I am scared that if I remove anything, something will go wrong, also you need to have a full page to see the cursor, else you can't see it, and the problem with it going below is something I have to solve once this problem is solved):</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html style="background-color:black; margin:0;padding:0;" lang="en-US"&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;link rel="icon" href="icon.png"/&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"/&gt;
  &lt;meta name="description" content="Description"/&gt;
  &lt;title&gt;MyTitle&lt;/title&gt;
  &lt;style&gt;
  a{
      color: inherit;
      text-decoration: none;
  }
  *{
      margin:0;
      padding:0;
  }
  #heading{
      color: white;
      text-align: center;
      font-size: 24px;
      font-weight: 420 bold;
      font-family: sans-serif;
      text-shadow: 2px 2px red;
      margin-right: 10px;
      margin-top: 20px;
  }
  #description{
      color: green;
      text-align: center;
      font-size: 19px;
      font-weight: 69 bold;
      font-family: serif;
      text-shadow: 1px 1px white;
      margin-right: 10px;
      margin-top: 20px;
  }
  #cursor{
      text-align: initial;
      position: absolute;
      left: 0;
    font-weight: 35;
    font-size: 25px;
    color: #2E3D48;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
  }
  #field{
      color: white;
      text-align: center;
      font-size: 20px;
      
  }
  #fieldDiv{
      background-color: #968786;
      text-align: center;
      width: 100%;
      height: 28px;}
  
  @keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-moz-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-webkit-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-ms-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  
  @-o-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: black;
    }
  }
  #cursorContainer{
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;
  }
  #bton{
      width: 20px;
      height: 20px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 id="heading"&gt;
          Heading
      &lt;/h1&gt;
      &lt;p id="description"&gt;Description&lt;/p&gt;
      &lt;div id="fieldDiv"&gt;
          &lt;p id="field"&gt;&lt;/p&gt;&lt;p id="cursorContainer" onclick="hideCursor()"&gt;&lt;span id="cursor"&gt;|&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;button id="bton" onclick="change();"&gt;
          &lt;!--Always add the script on the bottom of the BODY tag since it contains the script--&gt;
          &lt;script type="text/javascript"&gt;
              var marginNum = screen.width/2;
              const screenWidth = screen.width;
              function checkCtrlA(){
                  var ctrlPressed = false;
                  window.addEventListener("keydown", function(e){
                      if(e.keyCode == 17){
                          ctrlPressed = true;
                      }
                  });
                  if(ctrlPressed){
                      window.addEventListener("keydown", function(e){
                          if(e.keyCode == 65){
                              hideCursor();
                          }
                      })
                  }
              }
              window.onload = function(){
                  const cursor = document.getElementById("cursor");
                  const widthNeeded = innerWidth/2;
                  cursor.style.marginLeft = widthNeeded.toString() + "px";
                  cursor.style.cursor = "default";
  
              };
              const divToHide = document.getElementById("fieldDiv");
              divToHide.onclick = hideCursor;
              function printf(val){
                  console.log(val);
              }
              document.getElementById("fieldDiv").addEventListener('click', function(){
                  const element = document.getElementById("cursor");
                  element.style.visibility = "hidden";
              });
              document.getElementById("fieldDiv").addEventListener("mouseover", function(){
                  const element = document.getElementById("cursor");
                  element.style.visibility = "hidden";
              });
              document.getElementById("fieldDiv").addEventListener("mouseout", function(){
                  const element = document.getElementById("cursor");
                  element.style.visibility = "visible";
              });
              var currentText = document.getElementById("field").textContent;
              function change(){
                  movePosCursor();
                  currentText = document.getElementById("field").textContent += "a";
                  document.getElementById("cursor").style.visibility = "visible";
              }
              function movePosCursor(){
                  const element = document.getElementById("cursor");
                  marginNum += 5;
                  var widthInPx = marginNum.toString() + "px";
                  element.style.marginLeft = widthInPx;
  
              }
              function hideCursor(){
                  const element = document.getElementById("cursor");
                  element.style.visibility = "hidden";
              }
              checkCtrlA();
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>