title: cursor position not at start of placeholder in contentEditable div in Microsoft Edge
body: <p>The cursor at conteneditable div is not start of placeholder while its working fine in chrome and firefox.</p>
  
  <p>The div is autofocused and cursor must show from initial.</p>
  
  <p><a href="https://i.stack.imgur.com/JL0Pk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JL0Pk.png" alt="enter image description here"></a></p>
  
  <h1>html</h1>
  
  <pre><code>&lt;div id="" class="chatInput" contenteditable="true" placeholder="Type something..." autofocus="autofocus"&gt;&lt;/div&gt;
  </code></pre>
  
  <h1>css</h1>
  
  <pre><code>.cInput{
  padding: 5px 15px;
      color: var(--text-base-volumeone);
      outline: none;
      cursor: text;
      max-height: 32px;
      overflow-x: hidden;
      overflow-y: auto;
      width: 100%;
      min-height: 32px;
      font-family: LATORegular;
      font-size: 13px;
      vertical-align: bottom;
      transition: border-color 0.25s ease;
      caret-color: var(--caret-color);
      position: relative;
      white-space: initial;
  }
  </code></pre>