How to force span’s background color to be 100% width?

15 views
0

I’m trying to force a span element background to be the full width of parent.

Heads Up
Yes I’m fully aware of doing divs

(but divs are more of a hack rather than an actual solution to the problem)

Must be something similar to a span or span due to its text fluidity.
Must be in a pre tag.

Structure Setup Must be

<div>
<pre>
text text text <span> text text
text text </span>
</pre>
</div>

What I have

div {
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
}

.one {
  background: rgba(54, 188, 255, 0.15);
  color: rgba(54, 188, 255, 1);
}
<div>
  <pre>
 
Here is something<span class="one"> hello 

there
      how are you
      are you
      are you
      are you</span>
    
Here is something else

</pre>
</div>

What I’m trying to achieve

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
}

.one {
  background: rgba(54, 188, 255, 0.15);
  color: rgba(54, 188, 255, 1);
  position: absolute;
  right: 0;
  width: calc(100% - 133px);
}

.left {
  width: 140px;
  position: absolute;
}

.demo {
  color: rgba(54, 188, 255, 1);
  background: rgba(54, 188, 255, 0.15);
}
<div class="container">
  <pre>

<div class="left">Here is something</div><div class="one right"> hello</div>
<div class="demo">
there
      how are you
      are you
      are you
      are you</div>
Here is something else
  </pre>
</div>