title: CSS prevent span from moving down to new line
body: <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>