css - Make text container to fit content automatically -

I want to receive this special performance by CSS:

To fill the white page there, I have to put different texts and lines there, which are right and left. .

So far I have received this, but there are many issues that I get:

1. The width of the text is variable and if I width: 40%; This will reset the width of the other 2 lines
2. Display: Table does not allow me to align rows through the middle of the text

HTML :

  & lt; Div class = "container" & gt; & Lt; Div class = "lines l1" & gt; & Lt; / Div & gt; & Lt; Div class = "copy" & gt; Consumer Review & lt; / Div & gt; & Lt; Div class = "lines l2" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

 . Container {width: 100%; Display: Table; Status: Relative; Height: 100px;}. Line, .copy {display: table-cell; Vertical-aligned: medium; Width: Auto; } .copy {white-space: nowrap; Padding: 3px; Text-align: center; Font-size: 24px; Width: 40%;} L1, .l2 {Border bottom: 1px solid red; Height: 50px;  
 
  
 
 
  
 
 P> 
  HTML   
  & lt; Div class = "wrapper" & gt; & Lt; H1 class = "line" & gt; Consumer Review & lt; / H1> & Lt; / Div & gt;  
 
  CSS  
 
 . Warper {Width: 50%; Margin: 0 auto; }. Line {display: table; White-space: Abrop; }. Line: First, .line: {Background: Any repeat center / 98% 3px after linear-gradient (bottom, # 9 FD35F, # 4F8C31); material: ''; Exhibit: Table-Cell; Width: 50%; }