styles.css

.que.selfassess .self-assess-comment {
    margin-top: 4px;
}
.que.selfassess .self-assess-comment label,
.que.selfassess .self-assess-comment textarea {
    /* For some reason, 100% comes out too wide. The 14px here matches the
       right-padding on the container. */
    max-width: calc(100% - 14px);

    /* We would like this to say baseline, and have the first line of text in the textarea
       line up with the lable. That works in Firefox, but not Chrome. Hence we do this. */
    vertical-align: top;
}
.que.selfassess .self-assess-comment label {
    /* Our normal line-height is 17px. A text area has 1px border + 4px padding, so
       we need an extra 5px padding top and bottom, giving 27.*/
    line-height: 27px;
}

.que.selfassess .clearrating {
    padding: 2px 8px;
    font-size: 0.85714em;
}

.que.selfassess .rated {
    width: 24px;
    height: 24px;
    margin-right: 0;
}

.que.selfassess .rating label {
    cursor: pointer;
}

.que.selfassess .rating label .filled,
.que.selfassess .rating [type="radio"]:checked ~ label .empty {
    display: inline;
}

.que.selfassess .rating label .empty,
.que.selfassess .rating [type="radio"]:checked ~ label .filled {
    display: none;
}