Q:

Give border bottom on the second div

I have two DIV-s, which must fill the space of their upper div. Size of the first div can differ - depends on the text inside the div. What I want is to show dots to the end of remaining space.
My solution:   

.drugi {
  border: 1px dashed black;
}
<div>
  <div>this is testing</div>
  <div class="drugi"></div>
</div>

Problem is output:

Dots are occupying the whole space. What I would like it to be is this:

Please note: I've already tried solutions like this and this. My question differs, because I don't have fixed width of either DIV-s, so second DIV must simply fill remaining space with dots, without overlapping the first DIV.

A:

Use Flex

.outer{
display:flex;
}
.drugi{
  border-bottom:1px dashed black;   
  flex:1;
}
<div class="outer">
  <div>this is testing this is testing</div>
  <div class="drugi"></div>  
</div>

