title: How to display <div> inline surrounded with text?
body: <p>I would like to display a <code>&lt;div&gt;</code> element inline so that it is surrounded with text.</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;span&gt;Here is some &lt;div class="a"&gt;&lt;/div&gt; text&lt;/span&gt;
  </code></pre>
  
  <p>Let's say, the class <code>"a"</code> is defined as below:</p>
  
  <pre><code>.a {
      width:20px;
      height:20px;
      background-color:#f00;
  }
  </code></pre>
  
  <p>The result should be like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Abyxw.png" alt="alt text"></p>
  
  <p>Is it doable? Thank you for any suggestions.</p>