How to add dotted line after text?

Question

I need a dotted line after the text. The dotted line should be till the end of the line. In the example below, after Organisation/Agency text, dotted line should start and should last till the end of the line. With the code below, I am getting the dotted line below the text as well which is not what I want.

Organisation/Agency.................................................

I tried as below.

.horizontal_dotted_line {
  border-bottom: 1px dotted black;
  width: 200px;
}

<div class="horizontal_dotted_line">
  Organisation/Agency
</div>

But the output I am getting is

Organisation/Agency
.................................................

My required output is Organisation/Agency........................................

Answer 1

You can use :after pseudo-element for dotted line and also set display: flex on parent element. With flex: 1 on pseudo element it will take rest of free width.

.horizontal_dotted_line {
  display: flex;
  width: 300px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: 5px;
} 
.horizontal_dotted_line:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}

<div class="horizontal_dotted_line">Organisation/Agency</div>
<div class="horizontal_dotted_line">Lorem</div>

Answer 2

.horizontal_dotted_line{
     width: 200px;
     display : flex;
    } 
    .dot{
      flex: 1;
      border-bottom: 1px dotted black;
      height: 0.6em;
    }

<div class="horizontal_dotted_line">Organisation/Agency<span class="dot"></span></div>