CSS styling, float:right and keeping the left text to a restricted width

CSS styling, float:right and keeping the left text to a restricted width

I'm trying to replicate the following table of contents:

You can see my attempt here and see the problem: I don't know how to keep
the chapter titles restricted to a specific width so that they don't
wander over to the page numbers. I've tried things like width:250px and
margin-right:30px; and padding-right:30px;, but to no avail.
Here's some of the code:
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
<div style="text-align:center;font-size:80%">CHAP. IX.</div>
<div class="conts"><span><em>Of the different Degrees of Virtue and
Vice</em>, <em>and the methods of estimating them</em>. <em>Of
Difficulties attending the practice of Virtue the use of Trial and
Discipline in forming reasonable Beings to Virtue</em>, <em>and the
Essentials of a good and bad Character</em>.</span><span
style="float:right;">p. 200</span>
</div>
Any help would be appreciated.