CSS - apply padding to inline element across two lines

Question

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

My CSS

Answer 1

Here is one more trick for that:

Put

in another div and give it border-left, but before it delete padding from

css

    

       
Specialists in retirement income
    

CSS:

body { background:#ffffd; }
#wrap { width:400px; background:white; }

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    word-spacing:10px;
    font: 30px/1.4 Arial, sans-serif;
    white-space:pre-wrap;
}

.fix {
    border-left:20px solid #41a293;
    }

See this fiddle