title: How can I place text next to an image with flexbox?
body: <p>I'm trying to use flexbox for the first time to put text next to image. I have 4 divs inside <code>.flex-container</code>: 1.image 2.title 3.button 4.text. The problem is only with 4 - text.
  Somehow it doesn't work perfectly as you can see on the screen because text is placed below the image.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="details-section"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="flex-container"&gt;
        &lt;div&gt;
          &lt;img src="{{ product.image }}"
               class="details-img"&gt;
        &lt;/div&gt;
        &lt;div class="details-title"&gt; {{ product.name }} &lt;/div&gt;
        &lt;div class="details-price-button"&gt;{{ product.price }} PLN
          &lt;button (click)="addToCart()"
                  class="btn btn-secondary btn-sm"&gt;Add to cart
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="details-description"&gt;{{ product.details }}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.flex-container{
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .details-section {
    margin-top: 60px
  }
  
  .details-title {
    padding-left: 400px;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    height: 100px;
  }
  
  .details-price-button{
    margin-left: 150px;
    margin-top: 5px;
    float: right;
    font-weight: 500;
    height: 100px;
  }
  
  .details-img {
    border-radius: 8px;
  
  }
  
  .details-description {
      margin-left: 450px;
      margin-bottom: 200px;
      padding-bottom: 200px;
      height: 200px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5MsXn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MsXn.jpg" alt="expected result jpg"></a></p>