title: CSS <div> doesn't align the text to the left even when there is space
body: <p>Hello there I try to align some text in a  container to the left but it won't work even when there is free space. As you can see there is some free space directly next to the image which isn't used for no reason. Right here I show you a picture and also the style. Thanks in advance if anyone can help.</p>
  <p><img src="https://i.stack.imgur.com/DTEG9.png" alt="enter image description here" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-wrapper-overview {
    position: inherit;
    left: 100px;
    width: 65%;
  }
  
  .user-name {
    position: inherit;
    margin: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: large;
    font-weight: bold;
  }
  
  .last-message {
    position: inherit;
    height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px;
    font-size: small;
  }
  
  .timestamp-overview {
    position: inherit;
    margin: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: small;
    font-weight: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id={this.name} className="chat-overview" onClick={()=&gt;this.renderChat()}&gt;
    &lt;img className="round-image" src="https://i.pravatar.cc/200"&gt;&lt;/img&gt;
    &lt;div className="text-wrapper-overview"&gt;
      &lt;p className="user-name"&gt;{this.name}&lt;/p&gt;
      &lt;p className="last-message"&gt;{this.lastMessage.text}&lt;/p&gt;
      &lt;p className="timestamp-overview"&gt;{this.lastDate}&lt;/p&gt;
    &lt;/div&gt;
    &lt;div className="notification"&gt;10+&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>