Draw lines with css that extend full bleed

Question

So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:

https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png

Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.

I have tried creating the lines as an image which i am placing below the left text

Answer 1

Is only playing with CSS

body{
  background: black;
  margin: 0;
}
.div{
  position: relative;
  width: 80%;
  background: grey;
  display: table;
  margin-top: 50px;
}
.a,
.b{
  display: table-cell;
  color: white;
}
.a{
  text-align: right;
  font-size: 1.2em;
  padding: 15px;
  border-bottom: 2px solid white;
}
.b{
  width: 140px;
}
.b div{
  position: absolute;
  background: pink;
  font-size: 1em;
  bottom: 0;
  border: 2px solid white;
  padding: 8px;
}
strong{
  display: block;
  width: 150px;
  float: right;
}
.b div:before{
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 50px;
  background: white;
  top: 100%;
  left: -2px;
}

<div class="div">
  <div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
  <div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>