title: How to repeat character in HTML with responsive resizing?
body: <p>I am trying to create rows in a DIV where there are three pieces of information to display. A left align text, a right align text, and repeat character "." between the two</p>
  
  <p><a href="https://i.stack.imgur.com/ifaxp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifaxp.png" alt="enter image description here"></a></p>
  
  <p>I tried this using the HTML below. But it is not working with a div for each piece.</p>
  
  <pre><code> &lt;div style="margin-bottom:5px"&gt;&lt;!-- row 1 --&gt;
  
      &lt;div style="float:left;"&gt;Left&lt;/div&gt; &lt;!-- left column --&gt;
      &lt;div style="display: inline-block;"&gt;...&lt;/div&gt; &lt;!-- center column --&gt;
      &lt;div style="float:right;"&gt;Right&lt;/div&gt; &lt;!-- center column --&gt;
  
    &lt;/div&gt;&lt;!-- row 1 --&gt;
  </code></pre>
  
  <p>I believe it most likely has to be done using just one div displaying one piece of text/string where the "." character gets repeated between the other two pieces of text. I cant figure it out so that the string changes with the DIV size - in order to keep it responsive.</p>