Text inside bars dynamic and responsive

Issue

I want to achieve something like this:

Im trying to have the bars dynamic in addition to the length of the text and it should be fully responsive. Im interested in your approaches.

Solution

I think something like this would do the trick.

The background for inline-elements (such as span) renders exactly the way you need it. You just should add some padding for the span itself and set a bigger line-height for spacing the lines.

.wrapper {
  line-height: 2;
  font-family: sans-serif;
}

span {
  padding-block: 6px;
  background: lightgray;
}

<p class="wrapper">
  <span>Hello World<br>This is my task For you<br>guys, hope you enjoy it</span>
</p>

Answered By - Windchester