JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<h2>Rows with 25 characters</h2>
<!-- use this to test the size of 1ch
<div class="line"><div class="test"></div></div>
-->
</div>

<div class="row">
<div class="line" data-contentlength="25">0000000000000000000000000</div>
</div>

<div class="row">
<div class="line" data-contentlength="25">MMMMMMMMMMMMMMMMMMMMMMMMM</div>
</div>

<div class="row">
<div class="line" data-contentlength="25">Lorem ipsum dolor sit ame</div>
</div>

<div class="row">
<div class="line" data-contentlength="25">abcdEfghijklmnOpqrsTuvwxy</div>
</div>

<div class="row">
<h2>Rows with 50 characters</h2>
</div>

<div class="row">
<div class="line" data-contentlength="50">00000000000000000000000000000000000000000000000000</div>
</div>

<div class="row">
<div class="line" data-contentlength="50">MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
</div>

<div class="row">
<div class="line" data-contentlength="50">Lorem ipsum dolor sit ameLorem ipsum dolor sit ame</div>
</div>

<div class="row">
<div class="line" data-contentlength="50">abcdEfghijklmnOpqrsTuvwxyabcdEfghijklmnOpqrsTuvwxy</div>
</div>

CSS

/* make it a bit more appealing for the eye: */
body { background: #efefef; font-family: Roboto, Calibri, Sans-Serif; }
.row { width: 50%; margin: 1em auto; background: #fff; padding: 1em; }


/* ============================ [ option 1 ] ============================
                assert our lines have a 205px fixed width                 */
.line { width: 205px; border: 1px solid #ff000033; font-size: 1em; }

/* with this class, we can determine that 1ch = 8.109px
   it is only temporary, as calc cannot divide units.
*/
.line > .test { background: red; width: 10ch; height: 10ch; }

.line{
  --ch-width: 8.109; /* pixel */
  --characters-per-line: calc(205 / var(--ch-width));
}

.line[data-contentlength="25"] { font-size: calc(1em * 1/(25 / var(--characters-per-line))); }
.line[data-contentlength="50"] { font-size: calc(1em * 1/(50 / var(--characters-per-line))); }