title: CSS: Background color to text size
body: <p>I'm would like to color the background of a text but only to it's size.</p>
  
  <p>Images are better than a thousand words, here is what I'm trying to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/mNJs7.png" alt="enter image description here"></p>
  
  <p>And this is what I am achieving</p>
  
  <p><img src="https://i.stack.imgur.com/VWKlz.png" alt="enter image description here"></p>
  
  <p>I don't want to do this programmatically, I would like the background to adapt to the text ( because it may be dynamic )</p>
  
  <p>Is there anyway to do this without using javascript?</p>
  
  <p>Update (HTML):</p>
  
  <pre><code>&lt;div class="team-member-teaser-name"&gt;OSCAR&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.team-member-teaser-name
  {
      color: #4fb4d0;
      background: #135364;
      margin-top: 5px;
      margin-bottom: 5px;
      padding-left: 5px;
      font-size: 10px;
  }
  </code></pre>
  
  <p><strong>Update</strong> (Solved, based on @BoldClock answer):</p>
  
  <pre><code>.team-member-teaser-name
  {
      color: #4FB4D0;
      background: #135364;
      margin-top: 5px;
      padding-left: 5px;
      font-size: 10px;
      display: inline;
      float: left;
      padding-right: 9px;
      clear: both;
  }
  </code></pre>
  
  <p>I don't really understand how clear works, but is required to achieve the results on the image.</p>