JSFiddle - React, Tailwind, and code Playground

HTML

<div class="paragraph">
    <div class="dots">&bull;</div>
    <div class="number">1</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sem  odio, blandit quis pellentesque vel,
        dictum non elit. Proin lectus  sapien, pharetra at tempor vitae, sagittis ac est. Phasellus ut odio  neque,
        non tincidunt turpis. Nunc pretium sem urna, tincidunt lacinia  nulla. Ut arcu eros, sagittis id volutpat et,
        tincidunt in ante. Vivamus  vitae orci odio.
    </p>
</div>
<div class="paragraph">
    <div class="dots"><span>&bull;</span><span>&bull;</span></div>
    <div class="number">2</div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sem  odio, blandit quis pellentesque vel,
        dictum non elit. Proin lectus  sapien, pharetra at tempor vitae, sagittis ac est. Phasellus ut odio  neque,
        non tincidunt turpis. Nunc pretium sem urna, tincidunt lacinia  nulla. Ut arcu eros, sagittis id volutpat et,
        tincidunt in ante. Vivamus  vitae orci odio.
    </p>
</div>

CSS

.paragraph {
    position: relative;
    width: 500px;
    font-size: 14pt;
}

.paragraph .dots {
    text-align: center;
    color: lightgray;
}

.paragraph .dots span {
    margin: 0 3px;
}

.paragraph .number {
    position: absolute;
    top: 0;
    right: 0;
    color: lightgray;
}

.paragraph p {
    text-align: justify;
}