Simulating a Sphinx admonition in raw HTML

I’m trying to create an HTML style that formats a paragraph similarly to a Sphinx directive:

I got a pretty good approximation by defining a ::before pseudo-element that contains the directive name:

p.todo {
    border-width: 1pt;
    border-color: chocolate;
    padding: 4px 4px 4px 4px !important;
    background-color: bisque;
}

p.todo::before {
    display: block;
    height: 1.6em;
    margin: 8px 2px 8px 2px;
    background-color:firebrick;
    color: white;
    font-weight: bolder;
    content: "  To Do: ";    /* Leading spaces are no-break spaces, 0xA0. */

This content…

<p class="todo">Read the directive, dummy!</p>

…produces this output:

There are two things I want to change that I can’t figure out.

First, I want to center the heading’s text vertically. If I use vertical-align: middle, my browser tells me that I can’t do that unless I use display: inline or display: table-cell. If I use display: inline, the text is positioned after the heading instead of below it:

If I use display: table-cell, the heading element shrinks to fit the content:

I’ve looked for solutions to the last problem, but all of them seem to involve changing the properties of the preceding and following table cells. Since this element isn’t really a table cell, there are no preceding and following cells!

The second problem concerns the left and right margins of the heading element. In the examples I’ve shown there is 4px of space on each side where the background color of the directive element shows through. I want the heading to be just as wide as the directive element, as in Sphinx’s output. I can do that by changing the p.todo style’s padding-left and padding-right attributes to zero, but that shrinks the padding around the directive’s text as well. I can’t find a way to make the heading element extend to the margins of the directive element without letting the directive’s text do the same.

A final note: You may be tempted to say, “Figure out how Sphinx does it, and do it the same way.” But Sphinx doesn’t compose a directive with a styled paragraph; it does this:

<div class="admonition-todo admonition">
    <p class="admonition-title>
        ::before
        Todo
    </p>
    <p> text of admonition </p>
</div>

The whole point of this exercise is to get a similar result with HTML that is easy to remember and convenient to type. Doing it the way Sphinx does it isn’t the solution; it is the problem!