CodePen

HTML

            
              <div id="container">
    <dl>
        <dt>eyebrows</dt>
        <dd>6</dd>
        <dt class="sub">w/ lip</dt>
        <dd>10</dd>
        <dt class="sub">w/ chin</dt>
        <dd>15</dd>
        <dt>full face</dt>
        <dd>20</dd>
        <dt class="sub">w/ neck</dt>
        <dd>25</dd>
    </dl>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #container {
  width: 200px;
  margin: 20px auto;
}

dl {
	margin-top: 0;
  background: #D0579A;
  overflow: hidden;
  font-size: 1.333333333333333em; /* 16px / 12px */
  color: #fff;		
  font-style: italic;
  font-weight:bold;
}

dt {
  float: left;
  padding: 0 5px 0 0;
	position: relative;
	z-index: 3;
}

dt.sub {
  margin-left: 36px;
}

dt:after {
	content: "................................................................";
	height: 1px;
	position: absolute;
	left: 100%;
	z-index: 1;
}

dd {
  text-align: right;
 	padding: 0 5px;
  margin-left: 170px;
	position: relative;
  background-color: #D0579A;
	z-index: 3;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................