Give border bottom on the second div

Question

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.

Read about [css Ellipsis](https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/) — Roy Bogado, Sep 03 '19 at 06:46
Ellipsis add three dots at the end, which is not what I am looking for. I want to fill the whole remaining space with dots. — FrenkyB, Sep 03 '19 at 06:47

score 2 · Answer 1 · answered Sep 03 '19 at 06:49

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>

score 1 · Accepted Answer · answered Sep 03 '19 at 06:50

1

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>

answered Sep 03 '19 at 06:50

Lalji Tadhani

14,041
3
23
40

Why are you using: flex:1 ? – FrenkyB Sep 03 '19 at 07:02
`Why are you using: flex:1` reaming with cover – Lalji Tadhani Sep 03 '19 at 07:04

Pushprajsinh Chudasama · Answer 3 · 2019-09-03T07:40:07.083

0

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;
}

edited Sep 03 '19 at 07:40

answered Sep 03 '19 at 06:52

Pushprajsinh Chudasama

7,772
4
20
43

Give border bottom on the second div

3 Answers3