"CSS Flexbox" Section improvement

I feel like the “CSS Flexbox” section could be slightly improved upon by adding labels to the objects.

Below is the code I threw together to label the objects. I do not claim this code to be the most elegant, semantic, nor efficient. I took the time to make it more visually appealing.

<style>
  #box-container {
    display: flex;
    height: 500px;
    /* This is the area the user/student will add 'flex-direction' to */
  }
  div div { /* NEW: Selects both child divs */
    font-size: 50px;
    text-align: center;
    line-height: 250px;
    font-weight: bold;
  }

  div span { /* NEW: Selects the span child of div */
    opacity: .2;
    color: white;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"><span>1</span></div> <!-- Edited code to add span and label -->
  <div id="box-2"><span>2</span></div> <!-- Ditto -->
</div>

Welcome there,

If by “labels” you mean code comments, then we have specifically been removing comments in code to help the internationalisation (translation) of the curriculum.

It is mostly a case of comments being more difficult to maintain and translate.

Sorry, not comments.

The orange and blue divs should have “1” and “2” on them (in the HTML), such that when row-reverse or column is specified in CSS, the user can use the numbers (in addition to the colors) to see how/where they move.

Ah…my bad. I missed that difference. That is fair point, and could be easily added.

Thank you, for the clarification.

I added it in the code, but my solution probably not the best practice. I could have easily selected

#box-1, #box-2 { <code> }

not

div div { <code> }