Sentence and word numbers
The following example uses the display's
flex value and the float property to enumerate sentences and their words: 
<!DOCTYPE html>
<html><head><style>
.sentence {
margin-bottom: 1.5em;
}
.sentenceNo {
float: left;
width: 2.5em;
margin-top: 0.4em;
color: #c83;
background-color: #fffedc;
}
.sentenceContent {
display: flex;
flex-wrap: wrap;
width: 30em;
}
.word {
margin-left: 0.3em;
}
.t {
font-size: 200%;
}
.n {
color: #448;
}
</style>
</head>
<body>
<div class='sentence'>
<div class='sentenceNo'>1</div>
<div class='sentenceContent'>
<div class='word'><div class='t'>Lorem </div><div class='n'> 1</div></div>
<div class='word'><div class='t'>ipsum </div><div class='n'> 2</div></div>
<div class='word'><div class='t'>dolor </div><div class='n'> 3</div></div>
<div class='word'><div class='t'>sit </div><div class='n'> 4</div></div>
<div class='word'><div class='t'>amet, </div><div class='n'> 5</div></div>
<div class='word'><div class='t'>consectetur </div><div class='n'> 6</div></div>
<div class='word'><div class='t'>adipiscing </div><div class='n'> 7</div></div>
<div class='word'><div class='t'>elit, </div><div class='n'> 8</div></div>
<div class='word'><div class='t'>sed </div><div class='n'> 9</div></div>
<div class='word'><div class='t'>do </div><div class='n'>10</div></div>
<div class='word'><div class='t'>eiusmod </div><div class='n'>11</div></div>
<div class='word'><div class='t'>tempor </div><div class='n'>12</div></div>
<div class='word'><div class='t'>incididunt </div><div class='n'>13</div></div>
<div class='word'><div class='t'>ut </div><div class='n'>14</div></div>
<div class='word'><div class='t'>labore </div><div class='n'>15</div></div>
<div class='word'><div class='t'>et </div><div class='n'>16</div></div>
<div class='word'><div class='t'>dolore </div><div class='n'>17</div></div>
<div class='word'><div class='t'>magna </div><div class='n'>18</div></div>
<div class='word'><div class='t'>aliqua. </div><div class='n'>19</div></div>
</div>
</div>
<div class='sentence'>
<div class='sentenceNo'>2</div>
<div class='sentenceContent'>
<div class='word'><div class='t'>Ut </div><div class='n'> 1</div></div>
<div class='word'><div class='t'>enim </div><div class='n'> 2</div></div>
<div class='word'><div class='t'>ad </div><div class='n'> 3</div></div>
<div class='word'><div class='t'>minim </div><div class='n'> 4</div></div>
<div class='word'><div class='t'>veniam, </div><div class='n'> 5</div></div>
<div class='word'><div class='t'>quis </div><div class='n'> 6</div></div>
<div class='word'><div class='t'>nostrud </div><div class='n'> 7</div></div>
<div class='word'><div class='t'>exercitation </div><div class='n'> 8</div></div>
<div class='word'><div class='t'>ullamco </div><div class='n'> 9</div></div>
<div class='word'><div class='t'>laboris </div><div class='n'>10</div></div>
<div class='word'><div class='t'>nisi </div><div class='n'>11</div></div>
<div class='word'><div class='t'>ut </div><div class='n'>12</div></div>
<div class='word'><div class='t'>aliquip </div><div class='n'>13</div></div>
<div class='word'><div class='t'>ex </div><div class='n'>14</div></div>
<div class='word'><div class='t'>ea </div><div class='n'>15</div></div>
<div class='word'><div class='t'>commodo </div><div class='n'>16</div></div>
<div class='word'><div class='t'>consequat. </div><div class='n'>17</div></div>
</div>
</div>
<div class='sentence'>
<div class='sentenceNo'>3</div>
<div class='sentenceContent'>
<div class='word'><div class='t'>Duis </div><div class='n'> 1</div></div>
<div class='word'><div class='t'>aute </div><div class='n'> 2</div></div>
<div class='word'><div class='t'>irure </div><div class='n'> 3</div></div>
<div class='word'><div class='t'>dolor </div><div class='n'> 4</div></div>
<div class='word'><div class='t'>in </div><div class='n'> 5</div></div>
<div class='word'><div class='t'>reprehenderit </div><div class='n'> 6</div></div>
<div class='word'><div class='t'>in </div><div class='n'> 7</div></div>
<div class='word'><div class='t'>voluptate </div><div class='n'> 8</div></div>
<div class='word'><div class='t'>velit </div><div class='n'> 9</div></div>
<div class='word'><div class='t'>esse </div><div class='n'>10</div></div>
<div class='word'><div class='t'>cillum </div><div class='n'>11</div></div>
<div class='word'><div class='t'>dolore </div><div class='n'>12</div></div>
<div class='word'><div class='t'>eu </div><div class='n'>13</div></div>
<div class='word'><div class='t'>fugiat </div><div class='n'>14</div></div>
<div class='word'><div class='t'>nulla </div><div class='n'>15</div></div>
<div class='word'><div class='t'>pariatur. </div><div class='n'>16</div></div>
</div>
</div>
<div class='sentence'>
<div class='sentenceNo'>4</div>
<div class='sentenceContent'>
<div class='word'><div class='t'>Excepteur </div><div class='n'> 1</div></div>
<div class='word'><div class='t'>sint </div><div class='n'> 2</div></div>
<div class='word'><div class='t'>occaecat </div><div class='n'> 3</div></div>
<div class='word'><div class='t'>cupidatat </div><div class='n'> 4</div></div>
<div class='word'><div class='t'>non </div><div class='n'> 5</div></div>
<div class='word'><div class='t'>proident, </div><div class='n'> 6</div></div>
<div class='word'><div class='t'>sunt </div><div class='n'> 7</div></div>
<div class='word'><div class='t'>in </div><div class='n'> 8</div></div>
<div class='word'><div class='t'>culpa </div><div class='n'> 9</div></div>
<div class='word'><div class='t'>qui </div><div class='n'>10</div></div>
<div class='word'><div class='t'>officia </div><div class='n'>11</div></div>
<div class='word'><div class='t'>deserunt </div><div class='n'>12</div></div>
<div class='word'><div class='t'>mollit </div><div class='n'>13</div></div>
<div class='word'><div class='t'>anim </div><div class='n'>14</div></div>
<div class='word'><div class='t'>id </div><div class='n'>15</div></div>
<div class='word'><div class='t'>est </div><div class='n'>16</div></div>
</div>
</body></html>
Github repository about-css, path: /properties/display/flex/sentence-and-word-numbers.html