Background options for text entered in the HTML editor

Mock up of a styled div around text.  We would like to have the option of selecting some content and assigning a Div with a background color to a content region.

Heading Level Two

The next section of text has a div wrapped around a heading and two paragraphs.  The div has classes for a light gray background, padding on all sides, and vertical margins.

We are looking for a WYSIWYG option that wraps code around the content to create a content region with a gray background region. The below code creates this style.

<div class="bg-flcc-gray p-4 my-4">
    <h3>Heading...</h3>
    <p>Quisque accumsan...</p>
    <p>Suspendisse sed...</p>
</div>
<!-- end of region styled with a light gray background div -->

Heading Level Two

The next section of text has a div wrapped around a heading and two paragraphs.  The div has classes for a light blue background, padding on all sides, and vertical margins.

We are looking for a WYSIWYG option that wraps code around the content to create a content region with a light blue background region. The below code creates this style.

Note: We would like to change the color value of "bg-info" to FLCC's "Web Light Blue" value of #d9edf7

<div class="bg-flcc-light-blue p-4 my-4">
    <h3>Heading...</h3>
    <p>Quisque accumsan...</p>
    <p>Suspendisse sed...</p>
</div>
<!-- end of region styled with a light blue background div -->

Mimic a Promo Section on Two Column Layouts

Use this code to mimic a Promo Section with Image to the left and text to the right in large views, but stacked in smaller views.

<div class="bg-flcc-gray p-4 my-4">
     <div class="row">
          <div class="col-xl-5 pb-3">
               {Image from the Media Library Here}
           </div>
          <div class="col-xl-7">
               <h2><span class="section-title-border">Heading Here</span></h2>
               <p>Text goes here</p>
          </div>
     </div>
</div>