<div class='tabs'>
  <!-- Flattern structure for adjacent sibling combinator -->
  
  <!-- Tab 1 & Content -->
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">Tab 1</label>
  <section>
    <h2>Content of Tab 1</h2>
    <p>Hello World</p>
  </section>
  
  <!-- Tab 2 & Content -->
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <section>
    <h2>Content of Tab 2</h2>
    <p>Hello World</p>
  </section>
  
  <!-- Tab 3 & Content -->
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Tab 3</label>
  <section>
    <h2>Content of Tab 3</h2>
    <p>Hello World</p>
  </section>
  
  <!-- Tab 4 & Content -->
  <input type="radio" name="tab" id="tab4">
  <label for="tab4">Tab 4</label>
  <section>
    <h2>Content of Tab 4</h2>
    <p>Hello World</p>
  </section>
  
</div>

/* For debug only */
* {
  border: 1px solid black !important;  
  padding: 1em;
}


.tabs {
  /* Step 1: Enable Flex on the container */
  // display: flex;
  
  /* Step 2: Enable flex-wrap to put content section below tab label */
  // flex-wrap: wrap;
}
.tabs > section {  
  /* Step 3: Move content <section> to the end, after the tab labels */
  // order: 999;
  
  /* Step 4: Make sure the content <section> is 100% width */
  // width: 100%;
  
  /* Step 5: Hide all content <section> by default */
  // display: none;  
}
.tabs > input {
  /* display: none; Don’t use display:none. Bad for accessibility */
  
  /* Step 6: Hide the radio inputs */
  // opacity: 0;
  
  /* Step 7: Make sure the radio inputs don’t take up space in layout */
  // position: absolute;
}
/* Step 8: Select the label right next to the selected input */
.tabs > input[type=radio]:checked + label {
  /* Step 9: Highlight the selected label */
  // background: yellow;
}
/* Step 10: Select the section right next to the label which is next to the selected input */
.tabs > input[type=radio]:checked + label + section {
  /* Step 11: Unset the 'display:none' we did in step 5 */
  // display: unset;
}

/* Done. Make sure to disable the debug code at the beginning of CSS. And now it is time to make the tabs look good */

/* Make the tabs look good */
/* Final Step: Make the tabs pretty with padding and colors */

/*
.tabs > label {
  padding: .5em 1em;
  background: #b4d5e4;
  border-right: 1px solid #798f99;
}
.tabs > label:last-of-type {
  border-right: none;
}
.tabs > input[type=radio]:checked + label {
  background: #798f99;
} 

.tabs section {
  border: 1px #798f99 solid;
  border-top: 5px #798f99 solid;
  padding: 1em;
}

.tabs {
  margin: 2em;
}

*/