Divided div under a div - html

Question

I have problem with styling my html. I have HTML and CSS that looks like this:
HTML:
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
Your Result
</h2>
</div>
</div>
</div>
CSS:
.summary .scores .score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.summary .scores .score-name {
color: blue;
float: left;
line-height: 30pt;
font-size: 30pt;
}
.summary .scores .score-box {
float: right;
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 60pt;
text-align: center;
}
.summary .scores.distribution-hidden .score-box {
width: 160pt;
}
Now I want to add divided div under this score box. It should look like this:
Here is link to jsfiddle: https://jsfiddle.net/k666a9wu/
I was trying to do this but it always looks ugly. How can I do this with css?

Answer 1

Man, you are already doing it right.
* {box-sizing: border-box;}
.summary {
.scores {
.score-item {
clear: both;
height: 60pt;
margin: 15pt 0 0 0;
padding-left: 10pt;
}
.score-name {
margin: 0;
color: blue;
line-height: 30pt;
font-size: 20pt;
overflow: hidden;
width: 215px;
span {
font-size: 10pt;
float: left;
width: 30%;
border: 3px solid;
margin-left: -1px;
padding-left: 3px;
padding-right: 3px;
&:first-child {
width: 70%;
margin-left: 0px;
padding-left: 0;
}
}
}
.score-box {
background-color: #00A600;
color: white;
line-height: 30pt;
font-size: 20pt;
width: 215px;
text-align: center;
}
&.distribution-hidden {
.score-box {
width: 160pt;
}
}
}
}
<div class='page summary'>
<div class='scores distribution-hidden'>
<div class='score-item'>
<div class='score-box'>
50%
</div>
<h2 class='score-name'>
<span>Fall '13</span>
<span>50%</span>
</h2>
</div>
</div>
</div>
Preview
Output: http://jsbin.com/sasawofuda