CodePen

HTML

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

↑ Insert the most common viewport meta tag

CSS

            
              #container {
  width: 200px;
}
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:after {
	  	content: "................................................................";
	  	height: 1px;
	  	position: absolute;
	  	left: 100%;
	  	z-index: 1;
	}
	dd {
	  	text-align: right;
  	  padding: 0 5px;
	  	position: relative;
	  	background-color: #D0579A;
	  	z-index: 2;
	}
	dl dl {
		margin-left: 36px;
		font-size: 1em;
		overflow: hidden;
	}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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