[GrannyGrump]

@Chris Jones --- Query --- do you intend for this "template" to be used for *actual recipes*?

You might consider using <dl> definition list ---- use your ingredient name as the <dt> "term" and the quantities as the <dd> "definition" --- definition is offset like a hanging indent. You can experiment a lot with the formatting.

I don't think you have to be married to a print-style layout, as long as the information is clearly displayed. Dot leaders are a sink-hole in reflowable epub, as you are discovering. Too many ways for the swamp to suck them down....

EDIT TO ADD :

A rough idea--- this is with the "ingredients" centered. You might otherwise go with a fairly wide left margin for those.

CSS:

.acentr dl, .acentr .header
{
text-indent: 0;
text-align: center;
}

.header 
{
font-size: 1.3em;
font-weight: bold;
}

.instr
{
/* whatever paragraph layout desired */
}

dl
{
/* margin-left: 1em; */
/* margin not wanted if centering text */
}

dt
{
margin-top: .75em;
font-weight: bold;
}

dd
{
margin-left: 3em;
}

HTML:

<div class="acentr">

<p class="header">I. Dark and stormy night.</p>

<dl>

  <dt>Dark</dt>

    <dd>1 tsp.</dd>

  <dt>Storm</dt>

    <dd>16 oz.</dd>

  <dt>Rain</dt>

    <dd>5 qts.</dd>

<dt>Torrents</dt>

<dd>3 ea.</dd>

</dl>
</div>

<p>It was a dark and stormy night; the rain fell in (3)
 torrents except at occasional intervals, when it 
 was checked by a violent gust of wind which 
 swept up the streets…</p>