docs(material/badge): don't use inline elements in badge demo (#25758)

The badge docs were saying that badges might not work on inline elements while the example was still using inline elements itself. These changes update the example to use `div` elements instead.

Fixes #25751.

Author: crisbeto

src/components-examples/material/badge/badge-overview/badge-overview-example.css

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.demo-section + .demo-section {
+  margin-top: 16px;
+}

src/components-examples/material/badge/badge-overview/badge-overview-example.html

@@ -1,35 +1,31 @@
-<p>
 <!-- #docregion mat-badge-overlap -->
-  <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
+  <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
 <!-- #enddocregion mat-badge-overlap -->
-</p>
 
-<p>
 <!-- #docregion mat-badge-size -->
-    <span matBadge="1" matBadgeSize="large">Text with large badge</span>
+  <div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
 <!-- #enddocregion mat-badge-size -->
-</p>
 
-<p>
+<div class="demo-section">
   Button with a badge on the left
 <!-- #docregion mat-badge-position -->
   <button mat-raised-button color="primary"
       matBadge="8" matBadgePosition="before" matBadgeColor="accent">
     Action
   </button>
 <!-- #enddocregion mat-badge-position -->
-</p>
+</div>
 
-<p>
+<div class="demo-section">
     Button toggles badge visibility
 <!-- #docregion mat-badge-hide -->
     <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
         Hide
     </button>
 <!-- #enddocregion mat-badge-hide -->
-</p>
+  </div>
 
-<p>
+<div class="demo-section">
   Icon with a badge
 <!-- #docregion mat-badge-color -->
   <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
@@ -38,6 +34,4 @@
     <span class="cdk-visually-hidden">
       Example with a home icon with overlaid badge showing the number 15
     </span>
-</p>
-
-
+</div>

src/components-examples/material/badge/badge-overview/badge-overview-example.ts

@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'badge-overview-example',
   templateUrl: 'badge-overview-example.html',
+  styleUrls: ['badge-overview-example.css'],
 })
 export class BadgeOverviewExample {
   hidden = false;