title: Locating picture to the left, but the text centered
body: <p>I want to have my the <code>picture.png</code> to be exactly on the very left of the title &quot;ribbon&quot;, and the text to be centred about the ribbon (regardless of the presence of the picture). I've been struggling with CSS and flex boxes for a lot of time trying to achieve just this effect. Here I'm using some bootstrap classes, but <code>.heading</code> is my class.</p>
  <p>That being said, is it actually possible to do all this alignment without using flexbox, but something more natural and simple? Such as maybe something from CSS1, without all those flex boxes?</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>.heading {
    background-color: rgba(15, 156, 199, 0.829);
    height: 5%;
    display: flex;
    text-align: center;
    justify-content: space-between;
    /* not helpful of course */
  }
  
  
  /* Here's what I'm trying to achieve. I made this by artificially adding the following CSS code: */
  
  .name {
    margin-right: 31%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-sm"&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="heading"&gt;
        &lt;img class="rounded img-fluid" src="picture.png" alt="..."&gt;
        &lt;div class="name"&gt;
          &lt;h4&gt;Web server monitoring and maintenance.&lt;/h4&gt;
          &lt;div&gt;Monitoring and upgrades.&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Of course I want this to be naturally centred, not artificially.</p>
  <p><a href="https://i.stack.imgur.com/CcGyv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CcGyv.png" alt="enter image description here" /></a></p>