feat(curriculum): Add interactive examples to inline-block lesson (#62769)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-does-inline-block-work
 ---
 
-# --description--
+# --interactive--
 
 When working with CSS, you often encounter three different types of display behaviors for elements: `inline`, `block`, and `inline-block`.
 
@@ -25,17 +25,17 @@ In short, the key difference between `inline` and `inline-block` is that `inline
 
 Let's take a look at an example.
 
+:::interactive_editor
+
 ```html
+<link href="styles.css" rel="stylesheet">
+
 <div class="container">
   <span class="inline-block-element element1">Inline-Block Element 1</span>
   <span class="inline-block-element element2">Inline-Block Element 2</span>
 </div>
 ```
 
-In the above example, we have a `div` with a class of `container`. Inside that `div` element, we have two `span` elements.
-
-Here is the accompanying CSS:
-
 ```css
 .inline-block-element {
   display: inline-block;
@@ -52,6 +52,10 @@ Here is the accompanying CSS:
 }
 ```
 
+:::
+
+In the above example, we have a `div` with a class of `container`. Inside that `div` element, we have two `span` elements.
+
 Each of the span elements is set to `display:inline-block` and has a width and height set as well.
 
 The inline-block elements will appear side by side because they behave like inline elements, but they also have a specified width and height, which gives them block-like properties.
@@ -60,6 +64,17 @@ But, if you remove the `display: inline-block` property, neither the `height` no
 
 Here is the revised CSS:
 
+:::interactive_editor
+
+```html
+<link href="styles.css" rel="stylesheet">
+
+<div class="container">
+  <span class="inline-block-element element1">Inline-Block Element 1</span>
+  <span class="inline-block-element element2">Inline-Block Element 2</span>
+</div>
+```
+
 ```css
 .inline-block-element {
   width: 150px;
@@ -75,6 +90,8 @@ Here is the revised CSS:
 }
 ```
 
+:::
+
 In this code, we removed the `display: inline-block;` property but kept everything else intact. Here, the `span` elements revert to their default behavior as inline elements.
 
 As a result, the specified width and height are ignored, and the elements only take up the space needed for their content.