hr line between two divs - html

Question

Following is my fiddle in which I am trying to give hr line between two floating divs . Kindly let me know how can I give a responsive line between two floating divs.
http://jsfiddle.net/NH5Lc/5/
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
<hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>
<br/>
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
<hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>

Answer 1

You can use flex too. jsFiddle Live Demo
.between {
border: 3px dotted #0099CC;
margin-left:10px;
margin-right:10px;
}
.parent
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
width:100%;
}
.child2
{
-moz-box-flex:5.0; /* Firefox */
-webkit-box-flex:5.0; /* Safari and Chrome */
-ms-flex:9.0; /* Internet Explorer 10 */
box-flex:9.0;
}
<div class='parent'>
<div class='child1'>Calories</div>
<div class='child2'> <hr class="between" /></div>
<div class='child3'>20</div>
</div>
<div class='parent'>
<div class='child1'>Calories as dasd as dasd</div>
<div class='child2'> <hr class="between" /></div>
<div class='child3'>20</div>
</div>

Answer 2

paste it your between class
.between {
width: 500px;
float: left;
border-right: 1px solid gray;
}

Answer 3

<div style="border-top:1px solid black; width:100%;"></div> will do it. As Gert B. says, you should really be using a linked file rather than inline styles though. In which case, you would have in your CSS file:
.line{
border-top:1px solid black;
width:100%
}
Then in your markup:
<div class="line"></div>

Answer 4

it seems like you could use a <table> or at least a list <ul> for what you are trying to do .
With a list, you can use text-align, float and pseudo-element .
http://codepen.io/gc-nomade/pen/Bmhqc
ul, li {
padding:0;
margin:0;
list-style-type:none;
text-align:right;
}
li em {
float:left;
}
li em:after {
content:'';
border-bottom:dotted;
width:2000px;
margin-right:-2000px;/* reduce space needed to 0 */
display:inline-block;
vertical-align:middle;
}
li, span {
background:white;
overflow:hidden; /* hide pseudo line overflow */
}
<ul>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
<li><em>calorie</em><span>20</span></li>
</ul>

Answer 5

Html
<div id="outer">
<div id="left">Calories</div>
<div id="middle">
<hr class="between" />
</div>
<div id="right">20</div>
</div>
<br>
<br>
<div id="outer">
<div id="left">Calories</div>
<div id="middle">
<hr class="between" />
</div>
<div id="right">20</div>
</div>
CSS
#outer {
display:block;
width: 100%;
}
#left {
width: 100px;
float: left;
text-align:center;
}
#right {
width: 200px;
float: right;
text-align:center;
}
#middle {
float: left;
}
.between {
border: 3px dotted #0099CC;
width:200px;
margin-left:10px;
margin-right:10px;
}
Output:
Working fiddle