Update caption settings preview box to dynamically size with text

This CL updates CSS properties of the caption settings preview text
box so that the height of the box increases with the font size,
preventing the text from overflowing outside the div container
and overlapping with elements before and after the container.

Before & after screenshots:
https://x20.corp.google.com/users/ev/evliu/Bug1055734

Bug: 1055734
Change-Id: Ia7e764503b82a9eab27b3beff98ba3774c5fcb2b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2073141Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Evan Liu <evliu@google.com>
Cr-Commit-Position: refs/heads/master@{#744836}

chrome/browser/resources/settings/a11y_page/captions_subpage.html

@@ -18,9 +18,10 @@
         background-position: center;
         background-size: cover;
         display: flex;
-        height: 112px;
         justify-content: center;
         margin: 0 var(--cr-section-padding) var(--cr-section-padding);
+        min-height: 112px;
+        padding: 20px;
         text-align: center;
       }
     </style>