title: How to set html contentEditable div of fixed width
body: <p>I am having trouble getting a contentEditable element to show as a box of a fixed with (eg  2 characters wide). As it is it is the width of the padding only. Works OK when there is text in the box, but I would like to have an empty box of a certain width. Any ideas?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="so.css" /&gt;
  &lt;body&gt;
  &lt;h1 id="prompt"&gt;Type something in the box:&lt;/h1&gt;
  &lt;h1 id="textarea"&gt;&lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#prompt, #textarea{
      display:inline;
  }
  
  #textarea{
      contentEditable: true;
      width: 2em; /* 20px doesn't work either */
      cursor: text;
      background-color:rgba(132, 225, 132, 0.9);
      border: 1px solid black;
      padding: 2px;
  }
  </code></pre>