Two span in same line

I have a "div" that has two "span".
A "span" takes the text typed by the user and sends it to the backend to generate the following text (similar to autocomplete).
The second "span" is the return of the text generated by the model, which would be a complement suggestion. As you can see in the figure below.

The issue is that sometimes the text of the second <span> is overwritten and embarrassing the visualization. I would like to see a way to put the text of the second "span" in front of the first "span".

I've already tried to use "padding-left" in the second "span", but at some point the first "span" overwrites it.

Below are codes:

HTML -->

<template>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <div class="pad-container">
   <div tabindex="1" @focus="setCaret" class="divAutocomplete">
     <span @input="sendText" @keypress="preventInput" ref="editbar" class="editable" contenteditable="true" placeholder='Digite sua busca'></span> 
     <span class="placeholder" data-ondeleteId="#editx" contenteditable="false">{{String_Text}}</span>     
   </div>
 </div>
</template>

CSS -->

<style scoped>
   .pad-container {
       padding: 0;
       width: 640px;
       border-radius: 12px;
       border: medium solid;
       border-color: #0072c6;
    },
  .divAutocomplete {
       font-family: "Crete Round";
       font-size: 16px;
       border-radius: 8px;
       height: 32px;
       width: 100%;
       text-align: left;
       position: relative;
       background-color: hwb(244 16% 17% / 0.1);
       caret-color: #0072c6;
       color: #0072c6;
     },
  span {
       display: block;
       min-width: 1px;
       outline: none;
     },
 .editable {
       position: absolute;
       left: 8px;
       top: 5px;
       text-transform: lowercase;
     },
 .placeholder {
       color: gray;
       position: absolute;
       left: 8px;
       top: 5px;
       z-index: -1;
     }
</style>

"String Text" is simple text such as "Hello World" or "Welcome to the White House". I would like it to look like this if possible:

So that, when the user types the text, the second "span" would keep the space between the first "span"

To keep the suggestion at a constant distance from the editable text you have to:

• remove position: absolute from children,
• give parent display: flex,
• give the second child display: inline-block and a minor left padding

That's about it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.parent {
  padding: 1rem;
  border-radius: 12px;
  border: medium solid;
  border-color: #0072c6;
  display: flex;
}

.editable {
  min-width: .5rem;
  background-color: hwb(244 16% 17% / 0.1);
  caret-color: #0072c6;
  color: #0072c6;
  font-weight: bold;
  outline: none;
}

.suggestion {
  padding-left: .5rem;
  display: inline-block;
}

<!-- language: lang-html -->

<div class="parent">
  <div class="editable" contenteditable>This is the editable text...</div>
  <div class="suggestion">This is the dynamic suggestion...</div>
</div>

<!-- end snippet -->

If you want the suggestion displayed first, add

  flex-direction: row-reverse;
  justify-content: flex-end;

to parent and move the padding-left on the suggestion to padding-right.

Alternatively, you could switch their position in DOM (which would mean the only extra rule would be the change of padding side on the suggestion).

Note this will keep the two children side by side even when any of them has to wrap:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.parent {
  padding: 1rem;
  border-radius: 12px;
  border: medium solid;
  border-color: #0072c6;

  display: flex;
}

.editable {
  min-width: .5rem;
  background-color: hwb(244 16% 17% / 0.1);
       caret-color: #0072c6;
       outline: none;
}

.suggestion {
  padding-left: .5rem;
  display: inline-block;
}

<!-- language: lang-html -->

<div class="parent">
  <div class="editable" contenteditable>
    Kitty scratches couch bad kitty do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy why use post when this sofa is here, instead of drinking water from the cat bowl, make sure to steal water from the toilet cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers freak human out make funny noise mow mow mow mow mow mow success now attack human
  </div>
  <div class="suggestion">This is the dynamic suggestion...</div>
</div>

<!-- end snippet -->

Last, but not least, you should avoid re-inventing the wheel when creating UI. The intuitive pattern for the UI problem you're trying to solve is to open a scrollable drop-down selector under the editable element, and make the suggestions accessible via up/down arrows. When the user selects a suggestion and presses enter, the input's value is changed to the selected suggestion, without losing focus.

You should also note that contenteditable elements might create accessibility challenges on certain devices which, in some countries, is an offence when used on public websites. You might prefer fully accessible <input /> elements.