title: Css titles with div over another div
body: <p>I'm struggling to customize a div. I've found some solutions but doesn't seem to work for me when I have two lines of text using span. Here's an image of what I'm trying to achieve with two different types of text. </p>
  
  <p><a href="https://i.stack.imgur.com/dtF85.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dtF85.png" alt="Screenshot"></a></p>
  
  <p>Here's the code I have and it seems to be note working in terms of the background. Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  border: 1px solid #000; 
  padding: 10px; 
  text-align: center;
  }
  
  .content {
  margin: -40px 0 20px 0; 
  text-align: center;
  background-color: #ccc;
  padding: 10px 25px 10px 25px;  text-transform:uppercase;
  border: 1px solid #000; 
  }
  
  .title {color: red;}
  .subtitle {color: green;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br /&gt;&amp;nbsp;&lt;br /&gt;
  
  &lt;div class="container"&gt;&lt;div class="content"&gt;&lt;span class="title"&gt;Title&lt;/span&gt;&lt;br /&gt;&lt;span class="subtitle"&gt;Subtitle&lt;/span&gt;&lt;/div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non mi eget quam lobortis porta. Ut sagittis sem a fringilla ultricies. &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>