title: Image not allowing neighboring div to align correctly
body: <p>I'm designing an online clothing store, and on the product's page I want the product info (on the right) to align with the center of the image (on the left) while both of the divs are centered with the page. However, it seems that no matter what I do, the product info is always pushed down to the bottom corner of the image. It works when the image is removed completely, but unless that happens no formatting in CSS will affect the product-info div.</p>
  <p>I've tried floating the elements to the left but that negates the text-align that keeps them centered, and any padding, margin, or dimension changes I make to the product-info only adds to the bottom of the div rather than shifting it up. There's probably something obvious that I'm overlooking, but I've been working on this problem for so long and just can't seem to find a fix.</p>
  <p>Can someone please help me?</p>
  <p><a href="https://i.stack.imgur.com/VCUdm.png" rel="nofollow noreferrer">&gt; Screenshot of how it looks &lt;</a></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>* {
    margin: 0px;
    padding: 0px;
  }
  
  .product {
    text-align: center;
  }
  
  .product-view {
    top: 40px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
  }
  
  #product-image {
    width: 400px;
    height: 40%;
    min-width: 40%;
    min-height: 40%;
    padding: 20px;
  }
  
  .product-info {
    display: inline-block;
    padding: 10px;
    margin: 10px;
  }
  
  #product-name {
    font-size: 25px;
    text-transform: uppercase;
    text-align: left;
  }
  
  #product-price {
    font-size: 20px;
    padding: 20px 0px;
    text-align: left;
  }
  
  .product-info hr {
    width: 278px;
    opacity: 0.4;
  }
  
  #product-sizes {
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    width: fit-content;
  }
  
  #size-radio-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 15px;
    border: 1px solid black;
    margin: 5px 10px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 40px;
    color: black;
    cursor: pointer;
  }
  
  #add-to-cart {
    width: 278px;
    height: 40px;
    margin: 0 5px;
    cursor: pointer;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-size: 15px;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="content"&gt;
      &lt;div class="product"&gt;
        &lt;div class="product-view"&gt;
          &lt;img id="product-image" src="/Media/hoodieblack.png"&gt;
        &lt;/div&gt;
        &lt;div class="product-info"&gt;
          &lt;div id="product-name"&gt;
            &lt;h3&gt;Hoodie - Black&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div id="product-price"&gt;
            &lt;p&gt;$80.00&lt;/p&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div id="product-sizes"&gt;
            &lt;label for="size-select"&gt;Size&lt;/label&gt;
            &lt;div id="size-select"&gt;
  
              &lt;input type="radio" name="size" value="s" hidden id="s-size"&gt;
              &lt;label for="s-size" id="size-radio-btn"&gt;S&lt;/label&gt;
  
              &lt;input type="radio" name="size" value="m" hidden id="m-size"&gt;
              &lt;label for="m-size" id="size-radio-btn"&gt;M&lt;/label&gt;
  
              &lt;input type="radio" name="size" value="l" hidden id="l-size"&gt;
              &lt;label for="l-size" id="size-radio-btn"&gt;L&lt;/label&gt;
  
              &lt;input type="radio" name="size" value="xl" hidden id="xl-size"&gt;
              &lt;label for="xl-size" id="size-radio-btn"&gt;XL&lt;/label&gt;
  
              &lt;input type="radio" name="size" value="xxl" hidden id="xxl-size"&gt;
              &lt;label for="xxl-size" id="size-radio-btn"&gt;XXL&lt;/label&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button type="button" id="add-to-cart"&gt;Add to Cart&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>