Horizontal line between floating divs - css

Question

I checked various links to achieve this. One of them was: from stack overflow
Below is my code:
.a-deal {
position: relative;
}
.deal-hd {
float: left;
}
.deal-arw {
float: right;
padding: 10px;
background: grey;
}
.deal-hd:after {
content: '';
width: 100%;
border-bottom: solid 1px #d6d6d6;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<!-- <div class="mark"></div> -->
<div class="deal-arw">
˂
˃
</div>
</div>
Requirements:
line to come exactly at the center of two divs using pseudo selectors only
width of line should be scalable. That means in case, if any of the div size increase, the line should take the remaining space only.

Answer 1

You can just use display: flex and flex: 1 on deal-hd so it takes free width and add pseudo-element.
.a-deal {
display: flex;
align-items: center;
}
.deal-hd {
flex: 1;
display: flex;
align-items: center;
margin: 0;
}
.deal-hd:after {
content: '';
height: 1px;
background: black;
flex: 1;
margin: 0 10px;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<div class="deal-arw">
˂
˃
</div>
</div>

Answer 2

You can use flex for this. No need to use floats. Using floats you have to write more css to align the items vertically center using transform and position.
And I will also suggest to use :pseudo selector of the parent .a-deal not the heading .deal-hd
Stack Snippet
.a-deal {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.deal-hd {
margin: 0;
background: #fff;
z-index: 9;
padding-right: 10px;
}
.deal-arw {
padding: 10px;
background: grey;
z-index: 9;
padding-left: 10px;
}
.a-deal:after {
content: '';
width: 100%;
border-bottom: solid 1px #d6d6d6;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<!-- <div class="mark"></div> -->
<div class="deal-arw">
˂
˃
</div>
</div>