feat(curriculum): add interactive examples to block and inline lesson (#62767)

curriculum/challenges/english/blocks/lecture-what-is-css/672acc1e24c1e54df5ad89bd.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-difference-between-inline-and-block-level-elements-in-css
 ---
 
-# --description--
+# --interactive--
 
 In HTML and CSS, elements are classified as either **inline elements** or **block-level elements**, and this classification dictates how they behave in the document layout.
 
@@ -21,6 +21,8 @@ Some common block-level elements are `div` elements, paragraphs, headings, order
 
 Here is a code example of a block-level element:
 
+:::interactive_editor
+
 ```html
 <p style="border: 2px solid red;">
   First paragraph
@@ -28,6 +30,8 @@ Here is a code example of a block-level element:
 <p>Second paragraph</p>
 ```
 
+:::
+
 In this example, we have two paragraph elements where the first one has a red border around it.
 
 The two paragraph elements do not share the same line because they are block level elements by default.
@@ -44,6 +48,8 @@ Common inline elements are `span`, `anchor`, and `img` elements.
 
 Here's an example to better understand inline elements:
 
+:::interactive_editor
+
 ```html
 <p>This is a
   <span style="color: red; border: 2px solid green;">red</span>
@@ -51,6 +57,8 @@ Here's an example to better understand inline elements:
 </p>
 ```
 
+:::
+
 In this example, we have a `span` element nested inside of a paragraph element. The `span` element has a `red` text color with a `green` border around it so you can see the highlighted word better.
 
 As you can see, the `span` element only takes up as much space as the word "red" and does not push the following content to a new line.