Как сделать такой блок на css?
Вы на правильном пути)
Так и сделайте.
Допустим будет такая иерархия:
<div class="block">
    <span class="head">MongoDB</span>
    <div class="body">
        <span class="desc">
            <p class="name">MongoDB</p>
            <p class="name_desc">MongoDB .. database</p>
        </span>
        <a class="button">More Details</a>
    </div>
</div>

На CSS:
spoiler.block {
    /* Your style */
}

.head {
    /* Your style */
}

.body {
    /* Your style */
}

.desc {
    /* Your style */
}

.name {
    /* Your style */
}

.name_desc {
    /* Your style */
}

.button {
    /* Your style */
}