[Vuejs]-Two span in same line

by

2👍

✅

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:

.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;
}
<div class="parent">
  <div class="editable" contenteditable>This is the editable text...</div>
  <div class="suggestion">This is the dynamic suggestion...</div>
</div>

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:

.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;
}
<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>

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.

Leave a comment