CODEWITHSUNDEEP
htmlcss
Mizlul
Mizlul

Reputation: 2290

How can you have three columns with middle column flexible width depended

How can you have three columns with middle column flexible width depended on first column.

Example: 

Firstname ........ John
Age .............. 39
Country .......... Germany

Also Is it possible to achieve such thing only with html and css?

Currently I have this code, but it is not flexible, I mean the Person Attribute might change at any point so I would like the dots column to be flexible on the first column. 

.container {
  width: 100%;
}

.container div {
  display: inline-block;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}
<div class="container">
  <div class="one">111111</div>
  <div class="two">.............</div>
  <div class="three">333</div>
</div>

Upvotes: 0

Views: 72

Answers (2)

Temani Afif
Temani Afif

Reputation: 274385

You can use table layout with some flex like below:

.container {
  display:table;
}
.row {
 display:table-row;
}

.container .col {
  display: table-cell;
  position:relative;
}
.container .col:first-child span{
  display:flex;
}

.col:first-child span:after {
  content:"";
  background:radial-gradient(circle at center,#000 2px,transparent 3px)0 0 /10px 100%, yellow;
  flex:1;
  padding-right:80px;
}
<div class="container">
<div class="row">
  <div class="col"><span>Firstname</span></div>
  <div class="col">John</div>
</div>
<div class="row">
  <div class="col"><span>Age</span></div>
  <div class="col">39</div>
</div>
<div class="row">
  <div class="col"><span>Country</span></div>
  <div class="col">Germany</div>
</div>
</div>

Upvotes: 1

MatejG
MatejG

Reputation: 1423

I have prepared snipet for you which will create dotted line in between two elements. This way are dots always filling space between two containers and white background from containers is hidding dots behind them. See below how I did it:

PS: Just edit .container width to have it smaller.

.container {
  width: 100%;
  line-height: 9px;
}
.container-line {
  border-bottom: 1px dotted #000000;
  position: relative;
  width: 100%;
  height: 30px;
}

.container div {
  display: inline-block;
}

.one {
  background: white;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 11px;
}

.three {
  background: white;
  float: right;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 11px;
}
<div class="container">
  <div class="container-line">
    <div class="one">111111</div>
    <div class="three">333</div>
  </div>
</div>

Upvotes: 0

Related Questions