gistfile1.html

<label for="first_name">First Name</label>
<div class="input text">
  <input type="text" id="first_name" />
</div>

<label for="last_name">Last Name</label>
<div class="input text">
  <input type="text" id="last_name" />
</div>

<label for="email">Email Address</label>
<div class="input text">
  <input type="text" id="email" />
</div>

gistfile2.html

<div class="input text">
  <label for="first_name">First Name</label>
  <input type="text" id="first_name" />
</div>

<div class="input text">
  <label for="last_name">Last Name</label>
  <input type="text" id="last_name" />
</div>

<div class="input text">
  <label for="email">Email</label>
  <input type="text" id="email" />
</div>

gistfile3.html

<label for="first_name">First Name</label>
<input type="text" id="first_name" />

<label for="last_name">Last Name</label>
<input type="text" id="last_name" />

<label for="email">Email Address</label>
<input type="text" id="email" />

gistfile4.css

/* A container to wrap just the text input */
/* ==================================================================================== */

input[type="text"]:container {
  background-color: #EEE;
  border: 1px solid #999;
  padding: 1.5em 1em;
}

gistfile5.css

/* put both the label and the text input in the same :container using sibling selectors */
/* ==================================================================================== */

label+input[type="text"]:container {
  margin-bottom: 0.75em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid #999;
}

/* now let's wrap the input within the label/input :container in its own :container */

label+input[type="text"]:container input:container {
  background-color: #EEE;
  border: 1px solid #999;
  padding: 1.5em 1em;
}

gistfile6.css

#header:container {
  background-color: #F00;
}

#header {
  width: 960px;
  margin: 0 auto;
}