title: CSS align an image to the left of a textbox
body: <p>I am new to HTML and CSS and I am wondering how I can put an image directly to the left of a textbox. For this the image must have the same height as the textbox and the overall picture has to be centered. This is the code I already have written:  </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>div {
      margin: auto;
      width: 20%;
      border: 1px solid black;
      padding: 25px 50px 500px;
      background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://climate.nasa.gov/system/feature_items/images/28_global_ice_viewer.jpg"&gt;
  &lt;div&gt; Textbox &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make an image the same size as the box next to it and how do i align/put this image next to the left-border of this rectangle. The overall block has to be in the center.</p>