title: Scalable image with text next to it
body: <p>I'm trying to make image near text scalable and responsive. Currently, when I run my html page, there is div which looks like this:</p>
  <p><a href="https://i.stack.imgur.com/QTSIi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QTSIi.png" alt="enter image description here" /></a></p>
  <p>It's good, but when I try resize my window, it'll look like this:
  <a href="https://i.stack.imgur.com/FLbvC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FLbvC.png" alt="enter image description here" /></a></p>
  <p>When the text wrap under image, I want set image style to <code>width: 100%;</code>.</p>
  <p>Is there any possible way to make image scale, when text is under it, but keep it, when there is enough place to put the text near the image?
  It should look like this:</p>
  <p><a href="https://i.stack.imgur.com/eKTJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eKTJi.png" alt="enter image description here" /></a></p>
  <p>My current code</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>.cake {
    background-color: white;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  
  .cake p {
    margin-bottom: 0;
    text-align: justify;
  }
  
  .cake&gt;.price {
    margin-right: 10px;
  }
  
  .cake&gt;img {
    padding-right: 20px;
    float: left;
    overflow: hidden;
    width: 100%;
    min-width: 240px;
    max-width: 300px;
    height: 200px;
    display: block;
    object-fit: cover;
  }
  
  .price {
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cake"&gt;
    &lt;img src="https://i.imgur.com/xWRtGkj.jpg"&gt;
    &lt;h4&gt;Cheesecake&lt;/h4&gt;
    &lt;p&gt;
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    &lt;/p&gt;
    &lt;span class="price"&gt;45&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>