Untitled

dabblet.css

.container {
    width: 400px;
}
.padded-multiline-wrapper {
  font-size: 1em;
  line-height: 1.4;
  padding: 2px 0;
  border-left: 20px solid #3A44BE;
  position: relative;
}
.padded-multiline-wrapper .padded-multiline {
  background-color: #3A44BE;
  padding: 4px 0;
  color: #fff;
  display: inline;
  margin: 0;
  border-bottom: 5px #FFE000 solid;
  position: relative;
}
.padded-multiline-wrapper:after {
  content: "";
  width: 20px;
  background-color: #FFE000;
  height: 5px;
  position: absolute;
  bottom: -5px;
  left: -20px;
}
.padded-multiline-wrapper .padded-multiline .padded-multiline-content {
  position: relative;
  left: -10px;
}

dabblet.html

<div class="container">
    <div class="padded-multiline-wrapper">
      <span class="padded-multiline"><span class="padded-multiline-content">How do I add padding to subsequent</span></span>
    </div>
    <br><hr><br>
    <div class="padded-multiline-wrapper">
      <span class="padded-multiline"><span class="padded-multiline-content">How do I add pad ding to  blub  and so on and so on bla bla bla</span></span>
    </div>

    <br><hr><br>
    <div class="padded-multiline-wrapper">
      <span class="padded-multiline"><span class="padded-multiline-content">How do I add padding to subsequent blub  and so on and so on bla bla bla</span></span>
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}