Give border bottom on the second div [duplicate] - html

Question

This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 3 years ago.
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.

Answer 1

You can use flexbox.
.drugi{
border-bottom: 1px dashed black;
flex: auto;
}
.d-flex {
display: flex;
}
<div class="d-flex">
<div>this is testing</div>
<div class="drugi"></div>
</div>
<div class="d-flex">
<div>this is</div>
<div class="drugi"></div>
</div>

Answer 2

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>

Answer 3

Try This:
HTML:
<div class="Table">
<div class="row">
<div class="Table_title">this is testing</div>
<div class="Table_border"></div>
</div>
</div>
CSS:
.Table .row {
display: table;
padding-bottom: 10px;
}
.Table_title{
display: table-cell;
white-space: nowrap;
}
.Table_border{
border-bottom: 1px dashed black;
width: 100%;
display: table-cell;
}