title: HTML card with title, image on left and text on the right
body: <p>I'm trying to make an HTML card following <a href="https://www.w3schools.com/howto/howto_css_cards.asp" rel="nofollow noreferrer">this</a>, but I want the layout to be as the following image:</p>
  <p><a href="https://i.stack.imgur.com/H57sY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H57sY.png" alt="enter image description here" /></a></p>
  <p>I still want the card effects (shadow border, hovering), and I'd like it to always keep the images at the same width.</p>
  <p>This is my code:</p>
  <pre><code>&lt;style&gt;
  .card {
    /* Add shadows to create the &quot;card&quot; effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 2px 16px;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  /* Add some padding inside the card container */
  .container {
    padding: 4px 4px;
  }
  &lt;/style&gt;
  
  
  &lt;div class=&quot;card&quot;&gt;
    &lt;h1&gt; TITLE &lt;/h1&gt;
    &lt;img src=&quot;img_avatar.png&quot; alt=&quot;Avatar&quot; style=&quot;float:left;width:45%&quot;&gt;
    &lt;div class=&quot;container&quot; style=&quot;float:right;width:45%&quot;&gt;
      &lt;h4&gt;&lt;b&gt;John Doe&lt;/b&gt;&lt;/h4&gt;
      &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But the result is not great: the image goes outside the card (you can see it <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic" rel="nofollow noreferrer">here</a>). How can I fix it?</p>
  <p>Thank you very much!</p>