CSS prevent span from moving down to new line
<p>I'm new to JS, CSS, HTML, so I may be going about this situation in the wrong way, but I'm trying to make a terminal for practice, and I ran into the following problem.</p>

<p>I have my prompt "> " in a span before the next one that'll receive text, but when the next one reaches the end of the line, the entire span moves down without the prompt.</p>

<blockquote>
  <p>ex.</p>
  
  <p>> text text text ....</p>
  
  <p>to</p>
  
  <p>></p>
  
  <p>text text text ........................</p>
</blockquote>

<p>I thought about adding some js to prevent the "> " from being erased (I want to add in backspace functionality), but I wanted to check if there's a better way.</p>

<p>Here's my code so far:</p>

<pre><code>HTML
&lt;body&gt;
  &lt;div&gt;
    &lt;span&gt;&gt; &lt;/span&gt;
    &lt;span id="append-here"&gt; text &lt;/span&gt;
    &lt;textarea id="text"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
&lt;/body&gt;

CSS
#append-here {
    white-space: pre-wrap;
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    min-height: 2em;
}

textarea {
  width: 20px;
  color: black;
  height: 1em;
  width: .8em;
  resize: none;
  overflow: hidden;
}

JS
    $("#text").bind("keydown", function Append_Key(e) {
  $("#append-here").append(String.fromCharCode(e.keyCode).toLowerCase());
});
</code></pre>

<p>And jsfiddle: <a href="https://jsfiddle.net/dbncmzwb/" rel="nofollow">https://jsfiddle.net/dbncmzwb/</a> </p>