title: HTML <span> and svg element are not inline
body: <p>My current situation is a fieldset that is inline with another one on my page.
  The fieldset this post is about contains a svg circle and some text.</p>
  
  <p>My goal is to have both of these inline to each other, with the fieldset adapting in size because i want to change the given <code>&lt;span&gt;</code>/<code>&lt;p&gt;</code> text and the color of the circle later on based on a function that returns either true or false.</p>
  
  <p>My current code is this: </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-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;fieldset class="fieldset-auto-width"&gt;
      &lt;legend&gt;some legend&lt;/legend&gt;
      &lt;div&gt;
        &lt;svg height="32" width="32"&gt;&lt;circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/&gt;&lt;/svg&gt;
      &lt;/div&gt;
      &lt;span&gt;some text&lt;/span&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/L70oupcp/2/" rel="nofollow noreferrer">JS-Fiddle to my code with CSS</a></p>
  
  <p>At this point i am not even sure if the second div that wraps the svg element is needed, because im trying to get it right for about half an hour now. The nested dif was there because i tried to force a maximum size to the svg element because of the unwanted space it took, even with <code>style="display: block"</code></p>
  
  <p>Now i want my svg circle and my <code>&lt;span&gt;</code> inline.</p>
  
  <p>The reason why i am currently using <code>&lt;span&gt;</code> and not <code>&lt;p&gt;</code> is because there is too much unwanted space below the svg, which is not as critical when using <code>&lt;span&gt;</code> instead of <code>&lt;p&gt;</code>.</p>
  
  <p>Edit: wrong jsfiddle link</p>