Quiz

It took quite a lot of quite scary CSS to get that result without changing the HTML structure, and undoing all the usual styling in the standard Moodle theme. Not sure how reusable this is, but here is the code from our theme. You may need to adapt it a bit, and you will certainly need to change the colours.

.que .info {
    background: transparent;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 12px;
    border: 0 none;
    border-radius: 0;
}

#region-main .que .info h3.no {
    display: inline;
    font-size: 1.28571em;
    line-height: 1.5;
    font-weight: bold;
    color: #002158;
    margin: 10px 0 0 0;
}
#region-main .que .info h3.no span.qno {
    font-size: 1em;
    font-weight: bold;
}

.que .info > div {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
    border-left: 1px solid #d4d2d2;
    font-size: 0.85714em;
}
.que .info > div.state + div {
    margin: 0;
    padding: 0;
    border-left: 0 none;
}
.que .info > div.editquestion img.iconsmall {
    padding: 0 0.3em 0.3em;
}
.que .info > div.state {
    display: inline;
    margin: 0 0 0 0.4em;
    padding: 0;
    border: 0 none;
    font-size: 1.28571em;
    font-weight: bold;
}
.que.correct .info > div.state {
    color: #378726;
}
.que.partiallycorrect .info > div.state {
    color: #cc6702;
}
.que.notanswered .info > div.state,
.que.incorrect .info > div.state {
    color: #a51e1e;
}
.que .info > div.state:after {
    content: '';
    display: block;
    margin: -5px 0 0;
    padding: 0;
}
.que .content {
    margin: 0 0 0 0;
    width: auto;
}