How to repeat character in HTML with responsive resizing?

Question

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

I tried this using the HTML below. But it is not working with a div for each piece.

 <div style="margin-bottom:5px"><!-- row 1 -->

    <div style="float:left;">Left</div> <!-- left column -->
    <div style="display: inline-block;">...</div> <!-- center column -->
    <div style="float:right;">Right</div> <!-- center column -->

  </div><!-- row 1 -->

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.

Answer 1

You could achieve that rather simply with flexbox and a dotted border.

.row { display: flex; }

.center {
  flex-grow: 1;
  border-bottom: 2px dotted black;
  margin: 0 4px 4px;
}

<div class="row">
  <div class="left">Left</div>
  <div class="center"></div>
  <div class="right">Right</div>
</div>

<div class="row">
  <div class="left">This is some longer left text</div>
  <div class="center"></div>
  <div class="right">Right</div>
</div>

<div class="row">
  <div class="left">Left</div>
  <div class="center"></div>
  <div class="right">This is some longer right text</div>
</div>

• Make parent display: flex so that children align side-by-side.
• Add flex-grow: 1 to the center so that it fills empty space
• Add border-bottom: 2px dotted black to achieve your dotted line
• Add some margins to position and pad the dotted line properly