title: Multiple divs with background color behind text
body: <p>I'm trying to put a background color behind text. I'll have multiple elements like this.</p>
  
  <p>The current problem I'm experiencing is that, to have the background color "fit" the text, I'm using the 'display: inline' property. However, the problem is that for the next element, I need it to show up on a new line, not on the same line.</p>
  
  <p>How it current is:</p>
  
  <p><img src="https://i.stack.imgur.com/lkkP4.png" alt="http://i.imgur.com/jLVRfwk.png"></p>
  
  <p>How I need it:</p>
  
  <p><img src="https://i.stack.imgur.com/kZnqh.png" alt="http://i.imgur.com/dXyXNSa.png"></p>
  
  <p>Here's the JSFiddle I started: <a href="http://jsfiddle.net/KFYyd/5/" rel="nofollow noreferrer"><strong>http://jsfiddle.net/KFYyd/5/</strong></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="text"&gt;This is text.&lt;/div&gt;
  &lt;div class="text"&gt;This is text.&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.text {
    display: inline;
    background: black;
    color: white;
    padding: 5px;
  }
  </code></pre>
  
  <p>Please help.</p>