.admin-review { counter-reset: question; float: left; width: 66%; form { margin-left: 2.3em; position: relative; &::before { content: counter(question) ') '; counter-increment: question; font-size: 1.25em; left: -1.8em; position: absolute; top: 0.4em; } } } .review-comments { float: right; padding-left: 30px; width: 33%; > div { margin-bottom: 30px; } form { margin-bottom: 30px; } .comment-message { margin-right: 5px; } .comment-author { font-size: 0.85em; font-weight: 700; margin-bottom: 30px; text-align: right; &::before { content: '- '; } } .comment-edit-stamp { color: rgba($gray-dark, 0.65); font-size: 0.75em; text-align: right; } .comment-edit-btn { cursor: pointer; display: inline-block; font-size: 0.85em; font-weight: bold; padding: 2px 5px; &:hover { background-color: $gray-base; color: $gray-lighter; } } .comment-edit-form { display: none; margin: 30px 0; padding: 10px 0; } [type="checkbox"] { &:checked + .comment-edit-form { display: block; } } } .review_meta { @media screen and (min-width: 768px) { display: flex; & > div { flex: 1 1 auto; } } .review_meta__votes { margin-bottom: 15px; a { padding: 5px; } } .review_meta__vetos { label { display: inline-block; margin-left: 15px; } .review-status-comments { opacity: 0; padding: 15px 0; height: 0; max-height: 0; overflow: hidden; transition: all 0.500s; } input:checked ~ .review-status-comments { opacity: 1; height: auto; max-height: 9999px; overflow: auto; transition: all 0.7500s; } } }