title: How to place multiple span text inline with SVG image inside an anchor?
body: <p>This is a noob question, and I spent 2 hrs solving this already. I have an anchor which has SVG and two span text inline. What I'm going to do is inline all the span text with SVG, but I have never reached it. I only made the first span inline with SVG, however for the second span I don't know how to place it under the first span. Can you guys help? :D</p>
  <p>Anyway I did:</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/58788369/making-multiple-lines-of-text-inline-with-an-image">Making multiple lines of text inline with an image</a> but It inline 1 span only.</li>
  </ul>
  <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>/* Title and Subtitle logo */
      svg {
              filter: url(#Slogo)
            }
  
            .logoIcon {
              vertical-align: top;
            }
      
      @media (max-width: 600px) {
        a.navbar-brand span.head-title {
          font-size: 16px;
          font-weight: bolder;
          vertical-align: top;
        }
        
      a.navbar-brand span.head-title::after {
      content: '\A';
      white-space: pre;
      }
  
        a.navbar-brand span.head-subtitle {
          font-size: 10px;
          font-weight: 400;
        }
      }
  
      @media (min-width: 600px) {
        a.navbar-brand span.head-title {
          font-size: 20px;
          font-weight: bolder;
          vertical-align: top;
        }
   a.navbar-brand span.head-title::after {
      content: '\A';
      white-space: pre;
  }
        a.navbar-brand span.head-subtitle {
          font-size: 14px;
          font-weight: 400;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          &lt;a class="navbar-brand" style="margin-top:0" rel="tooltip" title="Brand" data-placement="bottom" href="&lt;?= base_url() ?&gt;"&gt;
              &lt;svg xmlns=" http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35pt" height="35pt" class="logoIcon" viewBox="0 0 150 150" version="1.2"&gt;
                &lt;defs&gt;
                  &lt;filter id="Slogo"&gt;
                    &lt;feColorMatrix type="matrix" values="0 1 0 0 0
                0 1 0 0 0
                0 1 0 0 0
                0 1 0 1 0 " /&gt;
                  &lt;/filter&gt;
                  &lt;g&gt;
                    &lt;symbol overflow="visible" id="glyph0-0"&gt;
                      &lt;path style="stroke:none;" d="M 12.609375 -95.546875 L 67.578125 -95.546875 L 67.578125 0 L 12.609375 0 Z M 19.40625 -6.796875 L 60.78125 -6.796875 L 60.78125 -88.75 L 19.40625 -88.75 Z M 19.40625 -6.796875 " /&gt;
                    &lt;/symbol&gt;
                    &lt;symbol overflow="visible" id="glyph0-1"&gt;
                      &lt;path style="stroke:none;" d="M 68.421875 -26.53125 C 68.421875 -17.90625 65.316406 -11.109375 59.109375 -6.140625 C 52.898438 -1.171875 44.265625 1.3125 33.203125 1.3125 C 23.003906 1.3125 13.984375 -0.601562 6.140625 -4.4375 L 6.140625 -23.265625 C 12.585938 -20.390625 18.046875 -18.363281 22.515625 -17.1875 C 26.984375 -16.007812 31.066406 -15.421875 34.765625 -15.421875 C 39.210938 -15.421875 42.625 -16.269531 45 -17.96875 C 47.375 -19.664062 48.5625 -22.191406 48.5625 -25.546875 C 48.5625 -27.421875 48.035156 -29.085938 46.984375 -30.546875 C 45.941406 -32.003906 44.40625 -33.410156 42.375 -34.765625 C 40.351562 -36.117188 36.226562 -38.273438 30 -41.234375 C 24.15625 -43.984375 19.773438 -46.617188 16.859375 -49.140625 C 13.941406 -51.671875 11.609375 -54.613281 9.859375 -57.96875 C 8.117188 -61.320312 7.25 -65.242188 7.25 -69.734375 C 7.25 -78.179688 10.113281 -84.820312 15.84375 -89.65625 C 21.570312 -94.5 29.492188 -96.921875 39.609375 -96.921875 C 44.566406 -96.921875 49.300781 -96.332031 53.8125 -95.15625 C 58.320312 -93.976562 63.039062 -92.320312 67.96875 -90.1875 L 61.4375 -74.4375 C 56.332031 -76.53125 52.113281 -77.988281 48.78125 -78.8125 C 45.445312 -79.644531 42.171875 -80.0625 38.953125 -80.0625 C 35.117188 -80.0625 32.175781 -79.164062 30.125 -77.375 C 28.082031 -75.59375 27.0625 -73.265625 27.0625 -70.390625 C 27.0625 -68.597656 27.472656 -67.035156 28.296875 -65.703125 C 29.128906 -64.378906 30.445312 -63.097656 32.25 -61.859375 C 34.0625 -60.617188 38.34375 -58.382812 45.09375 -55.15625 C 54.019531 -50.882812 60.140625 -46.601562 63.453125 -42.3125 C 66.765625 -38.019531 68.421875 -32.757812 68.421875 -26.53125 Z M 68.421875 -26.53125 " /&gt;
                    &lt;/symbol&gt;
                  &lt;/g&gt;
                &lt;/defs&gt;
                &lt;g id="surface1"&gt;
                  &lt;path style=" stroke:none;fill-rule:nonzero;fill:rgb(87.059021%,67.059326%,53.729248%);fill-opacity:1;" d="M 139.300781 149.542969 L 10.386719 149.542969 C 5.078125 149.542969 0.75 145.21875 0.75 139.90625 L 0.75 10.992188 C 0.75 5.683594 5.078125 1.355469 10.386719 1.355469 L 139.300781 1.355469 C 144.613281 1.355469 148.9375 5.683594 148.9375 10.992188 L 148.9375 139.90625 C 148.9375 145.21875 144.613281 149.542969 139.300781 149.542969 Z M 139.300781 149.542969 " /&gt;
                  &lt;path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 130.820312 72.535156 L 97.136719 42.921875 L 98.167969 87.742188 L 109.066406 77.109375 L 118.664062 97.703125 L 125.257812 94.609375 L 115.660156 74.058594 Z M 130.820312 72.535156 " /&gt;
                  &lt;path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 118.664062 99.273438 C 118.488281 99.273438 118.308594 99.230469 118.128906 99.183594 C 117.722656 99.050781 117.410156 98.738281 117.230469 98.378906 L 108.574219 79.800781 L 99.289062 88.867188 C 98.84375 89.3125 98.167969 89.449219 97.585938 89.179688 C 97.003906 88.957031 96.644531 88.371094 96.601562 87.742188 L 95.566406 42.964844 C 95.566406 42.335938 95.925781 41.753906 96.464844 41.484375 C 97.046875 41.214844 97.722656 41.351562 98.167969 41.753906 L 131.851562 71.367188 C 132.300781 71.769531 132.480469 72.445312 132.300781 73.027344 C 132.121094 73.609375 131.582031 74.058594 130.953125 74.105469 L 117.992188 75.359375 L 126.648438 93.933594 C 127.007812 94.742188 126.695312 95.640625 125.886719 96 L 119.292969 99.09375 C 119.113281 99.230469 118.890625 99.273438 118.664062 99.273438 Z M 109.066406 75.539062 C 109.15625 75.539062 109.246094 75.539062 109.335938 75.585938 C 109.832031 75.675781 110.277344 75.988281 110.457031 76.480469 L 119.382812 95.640625 L 123.152344 93.890625 L 114.226562 74.6875 C 114 74.238281 114.046875 73.699219 114.269531 73.25 C 114.496094 72.800781 114.988281 72.535156 115.480469 72.445312 L 127.050781 71.277344 L 98.796875 46.421875 L 99.648438 84.066406 L 107.945312 75.941406 C 108.261719 75.71875 108.664062 75.539062 109.066406 75.539062 Z M 109.066406 75.539062 " /&gt;
                  &lt;g style="fill:rgb(100%,100%,100%);fill-opacity:1;"&gt;
                    &lt;use xlink:href="#glyph0-1" x="14.848997" y="122.254314" /&gt;
                  &lt;/g&gt;
                &lt;/g&gt;
              &lt;/svg&gt;
              &lt;span class="head-title" style=""&gt;Brand Title&lt;/span&gt;
              &lt;span class="head-subtitle" style=""&gt;Brand Subtitle&lt;/span&gt;
            &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/3mOmh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3mOmh.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/GhvMH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GhvMH.png" alt="enter image description here" /></a></p>